web-dev-qa-db-fra.com

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

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 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 à l'intérieur de 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?

angularng-bootstrapangular-template
49
Boo Yan Jiong

Les variables de référence de modèle sont définies dans le modèle dans lequel elles sont définies. Une directive structurelle crée un modèle imbriqué et, par conséquent, introduit une portée distincte.

Donc, vous pouvez simplement utiliser une variable pour votre référence de modèle

<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à été déclaré à l'intérieur de <ng-template ngFor

Exemple de Plunker

Pour plus de détails, voir aussi:

51
yurzui

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!

3
Alex Boisselle