ตัวแปรอ้างอิงเทมเพลตแบบไดนามิกภายใน ngFor (Angular 9)

จะประกาศตัวแปรอ้างอิงเทมเพลตไดนามิก ภายในองค์ประกอบได้อย่างไรngFor

ฉันต้องการใช้คอมโพเนนต์ป็อปโอเวอร์จาก ng-bootstrap รหัสป๊อปโอเวอร์ (ที่มีการผูก Html) จะเป็นดังที่แสดง:

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

ฉันจะห่อองค์ประกอบเหล่านั้นไว้ข้างในได้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>

อืม ... มีความคิดยังไง?

ตัวแปรอ้างอิงเทมเพลตจะถูกกำหนดขอบเขตให้กับเทมเพลตที่กำหนดไว้คำสั่งโครงสร้างจะสร้างเทมเพลตที่ซ้อนกันดังนั้นจึงแนะนำขอบเขตที่แยกต่างหาก

ดังนั้นคุณสามารถใช้ตัวแปรเดียวสำหรับการอ้างอิงเทมเพลตของคุณ

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

และควรใช้งานได้เพราะได้ประกาศไว้ภายในแล้ว <ng-template ngFor

ตัวอย่าง Plunker

สำหรับรายละเอียดเพิ่มเติมโปรดดู:

• เชิงมุม - เทมเพลตซ้ำตามเงื่อนไขใน ng-content พร้อมตัวเลือก

นี่เป็นทางออกที่ดีที่สุดที่ฉันพบ: https://stackoverflow.com/a/40165639/3870815

ในคำตอบนั้นพวกเขาใช้:

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

เพื่อสร้างรายการส่วนประกอบที่สร้างขึ้นแบบไดนามิกเหล่านั้น ขอแนะนำให้คุณลองดู!

อีกวิธีในการอนุญาตคือการสร้างส่วนประกอบที่ปิดปุ่มและเทมเพลต ng

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

และมีสิ่งต่อไปนี้ในคอมโพเนนต์ปุ่มป็อปโอเวอร์

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

คุณสามารถใช้trackBy: trackByFnใน*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>