Dynamische Vorlagenreferenzvariable in ngFor (Angular 2)

Wie deklarieren Sie eine dynamische Vorlage Referenzvariable innerhalb einer ngFor element?

Ich will das popover-Komponente von ng-bootstrap, den popover-code (mit Html-Bindung) ist, wie gezeigt:

<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 wrap diejenigen Elemente innerhalb 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... keine Ahnung?

InformationsquelleAutor der Frage Boo Yan Jiong | 2017-06-08

  1. 21

    Vorlage Referenz-Variablen sind, deren Bereich auf die Vorlage, die in definiert sind. Eine strukturelle Richtlinie erstellt eine verschachtelte Vorlage und daher führt ein separater Bereich.

    So kann man nur eine variable verwenden, für die Vorlage Referenz

    <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, denn es hat bereits erklärt innerhalb <ng-template ngFor

    Plunker Beispiel

    Für mehr details siehe auch:

    InformationsquelleAutor der Antwort yurzui

Schreibe einen Kommentar