NgFor के अंदर डायनामिक टेम्प्लेट संदर्भ चर (कोणीय 9)

Question 1

कैसे एक तत्व के अंदर एक गतिशील टेम्पलेट संदर्भ चर घोषित करने के लिए ngFor?

मैं एनजी-बूटस्ट्रैप से पॉपओवर घटक का उपयोग करना चाहता हूं, पॉपओवर कोड (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>

हम्मम ... कोई आइडिया?

Question 2

टेम्प्लेट संदर्भ वेरिएबल्स को उनके द्वारा परिभाषित किए गए टेम्प्लेट में स्कोप किया जाता है। एक संरचनात्मक निर्देश एक नेस्टेड टेम्पलेट बनाता है और इसलिए, एक अलग गुंजाइश पेश करता है।

तो आप अपने टेम्प्लेट संदर्भ के लिए बस एक चर का उपयोग कर सकते हैं

<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

प्लंकर उदाहरण

अधिक जानकारी के लिए यह भी देखें:

कोणीय - चयनकर्ता के साथ एनजी-सामग्री में सशर्त डुप्लिकेट टेम्प्लेटेरेफ

Question 3

यह मैंने पाया सबसे अच्छा समाधान है: https://stackoverflow.com/a/40165639/3870815

उस उत्तर में वे उपयोग करते हैं:

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

गतिशील रूप से उत्पन्न घटकों की सूची बनाने के लिए। अत्यधिक आपको इसकी जाँच करने की सलाह देते हैं!

Question 4

इसे अनुमति देने के लिए एक और तरीका है कि एक घटक बनाया जाए जो बटन और एनजी-टेम्पलेट को लपेटता है

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

Question 5

आप उपयोग कर सकते हैं 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>