Ссылочная переменная динамического шаблона внутри ngFor (Angular 9)

Question 1

Как объявить ссылочную переменную динамического шаблона внутри ngForэлемента?

Я хочу использовать компонент popover из 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>

Хммм ... есть идеи?

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

Пример Plunker

Подробнее см. Также:

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

Question 3

Это лучшее решение, которое я нашел: https://stackoverflow.com/a/40165639/3870815

В этом ответе они используют:

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

Чтобы создать список этих динамически генерируемых компонентов. Настоятельно рекомендую вам проверить это!

Question 4

Другой способ разрешить это - создать компонент, который обертывает кнопку и ng-template.

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

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>