Dynamische Vorlagenreferenzvariable in ngFor (Winkel 9)

Wie deklariere ich eine dynamische Vorlagenreferenzvariable innerhalb eines ngForElements?

Ich möchte die Popover-Komponente von ng-bootstrap verwenden. Der Popover-Code (mit HTML-Bindung) lautet wie folgt:

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

Wie kann ich diese Elemente einwickelnngFor ?

<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 ... irgendeine Idee?

Vorlagenreferenzvariablen sind auf die Vorlage beschränkt, in der sie definiert sind. Eine Strukturanweisung erstellt eine verschachtelte Vorlage und führt daher einen separaten Bereich ein.

Sie können also nur eine Variable für Ihre Vorlagenreferenz verwenden

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

und es sollte funktionieren, weil es bereits innen deklariert hat <ng-template ngFor

Plunker Beispiel

Für weitere Details siehe auch:

• eckig - bedingtes doppeltes Templateref in ng-Inhalt mit Selektor

Dies ist die beste Lösung, die ich gefunden habe: https://stackoverflow.com/a/40165639/3870815

In dieser Antwort verwenden sie:

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

Erstellen einer Liste dieser dynamisch generierten Komponenten. Ich kann es nur empfehlen!

Eine andere Möglichkeit, dies zuzulassen, besteht darin, eine Komponente zu erstellen, die die Schaltfläche und die ng-Vorlage umschließt

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

Und haben Sie die folgenden in der Popover-Button-Komponente

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

Sie können trackBy: trackByFnin verwenden*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>