Variabel referensi template dinamis di dalam ngFor (Angular 9)

Bagaimana cara mendeklarasikan variabel referensi template dinamis di dalam elemen?ngFor

Saya ingin menggunakan komponen popover dari ng-bootstrap, kode popover (dengan pengikatan Html) seperti yang ditunjukkan:

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

Bagaimana saya bisa membungkus elemen-elemen itu di dalamnya 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>

Hmmm ... ada ide?

Variabel referensi template dicakup ke template tempat mereka ditentukan. Arahan struktural membuat template bertingkat dan, oleh karena itu, memperkenalkan cakupan terpisah.

Jadi Anda bisa menggunakan satu variabel untuk referensi template Anda

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

dan itu harus bekerja karena telah dideklarasikan di dalam <ng-template ngFor

Contoh Plunker

Untuk lebih jelasnya lihat juga:

• angular - templateref duplikat bersyarat di ng-konten dengan pemilih

Ini adalah solusi terbaik yang saya temukan: https://stackoverflow.com/a/40165639/3870815

Dalam jawaban itu mereka menggunakan:

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

Untuk membuat daftar komponen yang dibuat secara dinamis. Sangat merekomendasikan Anda untuk memeriksanya!

Cara lain untuk mengizinkannya adalah dengan membuat komponen yang membungkus tombol dan ng-template

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

Dan memiliki yang berikut di komponen tombol popover

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

Anda dapat menggunakan trackBy: trackByFndalam*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>