NgFor (Angular 9) içindeki dinamik şablon referans değişkeni

Bir eleman içinde dinamik bir şablon referans değişkeni nasıl bildirilir ngFor?

Popover bileşenini ng-bootstrap'tan kullanmak istiyorum, açılır pencere kodu (Html ​​bağlamayla) gösterildiği gibidir:

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

Bu öğeleri içine nasıl sarabilirimngFor ?

<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 ... herhangi bir fikrin var mı?

Şablon referans değişkenlerinin kapsamı, içinde tanımlandıkları şablona göre ayarlanır. Yapısal bir yönerge, iç içe geçmiş bir şablon oluşturur ve bu nedenle, ayrı bir kapsam sunar.

Böylece, şablon referansınız için yalnızca bir değişken kullanabilirsiniz

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

ve çalışmalı çünkü zaten içeride ilan etti <ng-template ngFor

Plunker Örneği

Daha fazla ayrıntı için ayrıca bakınız:

• açısal - seçici ile ng içeriğinde koşullu yinelenen şablon

Bulduğum en iyi çözüm bu: https://stackoverflow.com/a/40165639/3870815

Bu cevapta kullanıyorlar:

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

Dinamik olarak oluşturulmuş bileşenlerin bir listesini oluşturmak için. Kontrol etmenizi tavsiye ederim!

Buna izin vermenin başka bir yolu, düğmeyi ve ng şablonunu saran bir bileşen oluşturmaktır.

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

Ve açılır pencere bileşeninde aşağıdakilere sahip olun:

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

Sen kullanabilirsiniz trackBy: trackByFniçinde*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>