Dynamiczna zmienna odniesienia do szablonu wewnątrz ngFor (Angular 9)

Jak zadeklarować zmienną odniesienia do szablonu dynamicznego wewnątrz elementu?ngFor

Chcę użyć komponentu popover z ng-bootstrap, kod popover (z wiązaniem HTML) jest następujący:

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

Jak mogę zawinąć te elementy do środka 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 ... jakiś pomysł?

Zakres zmiennych odwołań do szablonów obejmuje szablon, w którym zostały zdefiniowane. Dyrektywa strukturalna tworzy zagnieżdżony szablon, a zatem wprowadza oddzielny zakres.

Możesz więc użyć jednej zmiennej jako odniesienia do szablonu

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

i powinno działać, ponieważ już zadeklarował w środku <ng-template ngFor

Przykład Plunkera

Aby uzyskać więcej informacji, zobacz także:

• kątowy - warunkowy zduplikowany wzorzec w treści ng z selektorem

To najlepsze rozwiązanie, jakie znalazłem: https://stackoverflow.com/a/40165639/3870815

W tej odpowiedzi używają:

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

Aby zbudować listę tych dynamicznie generowanych komponentów. Gorąco polecam to sprawdzić!

Innym sposobem na to jest utworzenie komponentu, który otacza przycisk i szablon ng

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

I miej następujące elementy w komponencie przycisku 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>

Możesz użyć trackBy: trackByFnw*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>