Variabel referensi template dinamis di dalam ngFor (Angular 9)

97

Bagaimana cara mendeklarasikan variabel referensi template dinamis di dalam elemen?ngFor

Saya ingin menggunakan komponen popover dari ng-bootstrap, kode popover (dengan pengikatan Html) seperti yang ditunjukkan:

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

Bagaimana saya bisa membungkus elemen-elemen itu di dalamnya 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 ... ada ide?

angular ng-bootstrap angular-template Boo Yan Jiong
sumber
Tidak ada yang namanya variabel referensi dinamis. Menurut Anda mengapa itu perlu dinamis?
Günter Zöchbauer
karena tutorial mereka mengatakan untuk memiliki pengikatan html di dalam popover, maka kita perlu membuat ng-templatedan merujuknya dengan variabel referensi template , tapi sekarang saya ingin menggunakan popover ini di dalam ngForelemen
Boo Yan Jiong
8
Lakukan hal yang sama. Variabel template akan berbeda untuk setiap elemen meskipun memiliki nama yang sama.
Günter Zöchbauer
3
Apa yang terjadi jika Anda menggunakan referensi yang sama untuk semuanya? Sudahkah Anda mengujinya?
developer033
Ha, saya tidak pernah memikirkan itu ... Saya akan mengujinya sekarang ... karena saya terus memikirkan cara mendeklarasikan variabel referensi template ** dengan "indeks" ** ... akan diperbarui nanti setelah saya mengujinya. ..: D
Boo Yan Jiong

Jawaban:

100

Variabel referensi template dicakup ke template tempat mereka ditentukan. Arahan struktural membuat template bertingkat dan, oleh karena itu, memperkenalkan cakupan terpisah.

Jadi Anda bisa menggunakan satu variabel untuk referensi template Anda

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

dan itu harus bekerja karena telah dideklarasikan di dalam <ng-template ngFor

Contoh Plunker

Untuk lebih jelasnya lihat juga:

yurzui
sumber
1
Perhatikan bahwa jika Anda menggunakan @ViewChild, Anda tidak dapat menggunakan solusi ini (dan kemudian harus menggunakan @ AlexBoisselle's)
Acak
17

Ini adalah solusi terbaik yang saya temukan: https://stackoverflow.com/a/40165639/3870815

Dalam jawaban itu mereka menggunakan:

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

Untuk membuat daftar komponen yang dibuat secara dinamis. Sangat merekomendasikan Anda untuk memeriksanya!

Alex Boisselle
sumber
1
Jawaban terbaik!
igg
1

Cara lain untuk mengizinkannya adalah dengan membuat komponen yang membungkus tombol dan ng-template

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

Dan memiliki yang berikut di komponen tombol 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>
pengguna14002866
sumber
-1

Anda dapat menggunakan trackBy: trackByFndalam*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
sumber