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

Question 1

요소 내에서 동적 템플릿 참조 변수 를 선언하는 방법은 ngFor무엇입니까?

ng-bootstrap의 팝 오버 구성 요소를 사용하고 싶습니다. 팝 오버 코드 (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>

흠 ... 어떤 생각?

Question 2

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

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

<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

플 런커 예

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

angular-선택기가있는 ng-content의 조건부 중복 templateref

Question 3

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

그 대답에서 그들은 다음을 사용합니다.

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

동적으로 생성 된 구성 요소의 목록을 작성합니다. 그것을 확인하는 것이 좋습니다!

Question 4

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

<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>

Question 5

당신이 사용할 수 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>