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




ng-bootstrap angular-template (2)

এটি আমি খুঁজে পেয়েছি সেরা সমাধান: https://stackoverflow.com/a/40165639/3870815

এই উত্তরে তারা ব্যবহার করে:

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

গতিশীলভাবে উত্পন্ন উপাদানগুলির একটি তালিকা তৈরি করা। আপনি এটি চেক আউট সুপারিশ!

কোনও 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>

হুঁ ... কোন ধারণা?


টেমপ্লেট রেফারেন্স ভেরিয়েবলগুলি যে টেম্পলেটটিতে সংজ্ঞায়িত করা হয় সেগুলি এগুলি স্কোপ করা হয় 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 উদাহরণ

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





angular-template