এনজিফোর্ডের ভিতরে গতিশীল টেম্পলেট রেফারেন্স পরিবর্তনশীল (কৌণিক 9)

Question 1

কোনও এলিমেন্টের ভিতরে ডায়নামিক টেম্পলেট রেফারেন্স ভেরিয়েবল কীভাবে ঘোষণা করবেন ngFor?

আমি এনজি-বুটস্ট্র্যাপ থেকে পপওভার উপাদানটি ব্যবহার করতে চাই, পপওভার কোডটি (এইচটিএমএল বাইন্ডিং সহ) দেখানো হয়েছে:

<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

টেমপ্লেট রেফারেন্স ভেরিয়েবলগুলি যে টেম্পলেটটিতে সংজ্ঞায়িত করা হয় সেগুলি এগুলি স্কোপ করা হয় A

সুতরাং আপনি আপনার টেম্পলেট রেফারেন্সের জন্য কেবল একটি ভেরিয়েবল ব্যবহার করতে পারেন

<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 উদাহরণ

আরও তথ্যের জন্য আরও দেখুন:

কৌণিক - নির্বাচকের সাথে এনজি-সামগ্রীতে শর্তসাপেক্ষে সদৃশ টেম্পলেটরেফ

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>