ngFor(Angular 9) 내부의 동적 템플릿 참조 변수

ngFor(Angular 9) 내부의 동적 템플릿 참조 변수

내부에 동적 템플릿 참조 변수를 선언하는 방법ngFor요소?

ng-bootstrap의 popover 구성 요소를 사용하고 싶은데, popover 코드(Html 바인딩 포함)는 다음과 같습니다.

<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template>
<button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
    I've got markup and bindings in my popover!
</button>

그 요소들을 어떻게 안에 감쌀 수 있습니까?ngFor?

<div *ngFor="let member of members">
    <!-- how to declare the '????' -->
    <ng-template #????>Hello, <b>{{member.name}}</b>!</ng-template>
        <button type="button" class="btn btn-secondary" [ngbPopover]="????" popoverTitle="Fancy content">
        I've got markup and bindings in my popover!
    </button>
</div>

음... 무슨 생각이라도?

템플릿 참조 변수는 정의된 템플릿으로 범위가 지정됩니다.구조적 지시사항은 중첩된 템플릿을 작성하므로 별도의 범위가 도입됩니다.

따라서 템플릿 참조에 하나의 변수만 사용할 수 있습니다.

<div *ngFor="let member of members">
  <ng-template #popupContent>Hello, <b>{{member.name}}</b>!</ng-template>
  <button type="button" class="btn btn-secondary" [ngbPopover]="popupContent" popoverTitle="Fancy content">
      I've got markup and bindings in my popover!
  </button>
</div>

그리고 이미 내부에서 선언했기 때문에 작동해야 합니다.<ng-template ngFor

플런커 예제

자세한 내용은 다음을 참조하십시오.

• 각도 - 조건부 중복 템플릿 다듬기 - 선택기 내용

이것이 제가 찾은 최고의 솔루션입니다. https://stackoverflow.com/a/40165639/3870815

이 답변에는 다음이 사용됩니다.

@ViewChildren('popContent') components:QueryList<CustomComponent>;

동적으로 생성된 구성 요소의 목록을 작성합니다.꼭 확인해보시길 추천합니다!

이것을 허용하는 또 다른 방법은 버튼과 ng-template를 감싸는 구성요소를 만드는 것입니다.

<div *ngFor="let member of members">
    <popover-button [member]="member"></pop-over-button>
</div>

팝업 버튼 구성 요소에 다음 사항을 입력합니다.

<ng-template #popContent>Hello, <b>{{member.name}}</b>!</ng-template>
    <button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
    I've got markup and bindings in my popover!
</button>

사용할 수 있습니다.trackBy: trackByFn에*ngFor

<div *ngFor="let member of members;trackBy: trackByF">
    <ng-template #popupContent>Hello, <b>{{member.name}}</b>!</ng-template>
        <button type="button" class="btn btn-secondary" [ngbPopover]="popupContent" popoverTitle="Fancy content">
        I've got markup and bindings in my popover!
    </button>
</div>

언급URL : https://stackoverflow.com/questions/44440879/dynamic-template-reference-variable-inside-ngfor-angular-9