Динамічна посилальна змінна шаблону всередині ngFor (Angular 9)

Як оголосити динамічну посилальну змінну шаблону всередині ngForелемента?

Я хочу використовувати компонент popover з ng-bootstrap, код popover (з прив'язкою 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

Приклад Планкера

Детальніше див. Також:

• angular - умовний дублікат templateref у ng-вмісті із селектором

Це найкраще рішення, яке я знайшов: 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>

І мати наступне в компоненті popover-button

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