Variable de référence de modèle dynamique dans ngFor (Angular 2)

Question

Comment déclarer une variable de référence de modèle dynamique dans un élément ngFor ?

Je veux utiliser le composant popover de ng-bootstrap, le code popover (avec la liaison HTML) est le suivant:

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

Comment puis-je envelopper ces éléments dans 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… une idée?

Answer 1

Modèle de référence des variables la portée est le modèle qu'ils sont définis dans. Structurelle de la directive crée un modèle imbriqué et, par conséquent, introduit une couverture différente.

De sorte que vous pouvez simplement utiliser une variable pour votre modèle de référence

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

et cela devrait fonctionner car il a déjà déclarée à l'intérieur d' <ng-template ngFor

Plunker Exemple

Pour plus de détails, voir aussi:

• angulaires - conditionnel double templateref en ng-contenu à l'aide du sélecteur

Answer 2

C'est la meilleure solution que j'ai trouvée: https://stackoverflow.com/a/40165639/3870815

Dans cette réponse, ils utilisent:

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

Construire une liste de ces composants générés dynamiquement. Je vous le recommande vivement!