Variável de referência de modelo dinâmico dentro de ngFor (Angular 9)

Como declarar uma variável de referência de modelo dinâmico dentro de um elemento?ngFor

Eu quero usar o componente popover do ng-bootstrap, o código popover (com ligação Html) é como mostrado:

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

Como posso envolver esses elementos dentro 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>

Hmmm ... alguma ideia?

Variáveis ​​de referência de modelo têm como escopo o modelo em que são definidas. Uma diretiva estrutural cria um modelo aninhado e, portanto, apresenta um escopo separado.

Então você pode usar apenas uma variável para sua referência de modelo

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

e deve funcionar porque já foi declarado dentro <ng-template ngFor

Exemplo de Plunker

Para obter mais detalhes, consulte também:

• angular - modelo duplicado condicional em conteúdo-ng com seletor

Esta é a melhor solução que encontrei: https://stackoverflow.com/a/40165639/3870815

Nessa resposta, eles usam:

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

Para construir uma lista desses componentes gerados dinamicamente. Recomendo que você dê uma olhada!

Outra maneira de permitir isso é criar um componente que envolve o botão e o modelo ng

<div *ngFor="let member of members">
    <popover-button [member]="member"></pop-over-button>
</div>

E tenha o seguinte no componente do botão popover

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

Você pode usar trackBy: trackByFnem*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>