Dynamische Vorlagenreferenzvariable in ngFor (Winkel 9)

91

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?

angular ng-bootstrap angular-template Boo Yan Jiong
quelle
Es gibt keine dynamischen Referenzvariablen. Warum muss es Ihrer Meinung nach dynamisch sein?
Günter Zöchbauer
Da in ihrem Tutorial angegeben wurde, dass HTML-Bindungen in einem Popover gespeichert werden sollen, müssen wir eine erstellen ng-templateund mit der Vorlagenreferenzvariablen darauf verweisen. Jetzt möchte ich dieses Popover in einem ngForElement verwenden
Boo Yan Jiong,
8
Mach einfach das Gleiche. Die Vorlagenvariable ist für jedes Element unterschiedlich, auch wenn es denselben Namen hat.
Günter Zöchbauer
3
Was passiert, wenn Sie für alles den gleichen Verweis verwenden ? Hast du es getestet?
Entwickler033
Ha, daran denke ich nie ... ich werde es jetzt testen ... weil ich immer wieder darüber nachdenke, wie eine ** Vorlagenreferenzvariable mit "index" ** deklariert wird ... wird später aktualisiert, nachdem ich es getestet habe. ..: D
Boo Yan Jiong

Antworten:

96

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:

Yurzui
quelle
Beachten Sie, dass Sie @ViewChilddiese Lösung nicht verwenden können , wenn Sie eine verwenden (und dann die von @ AlexBoisselle verwenden sollten)
Random
16

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!

Alex Boisselle
quelle
1
Die beste Antwort!
igg
0

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>
user14002866
quelle
-1

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>
Babak irannezhad
quelle