Variable de referencia de plantilla dinámica dentro de ngFor (Angular 9)

¿Cómo declarar una variable de referencia de plantilla dinámica dentro de un elemento?ngFor

Quiero usar el componente popover de ng-bootstrap, el código popover (con enlace Html) es como se muestra:

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

¿Cómo puedo envolver esos 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 ... ¿alguna idea?

Las variables de referencia de plantilla tienen como ámbito la plantilla en la que están definidas. Una directiva estructural crea una plantilla anidada y, por lo tanto, introduce un ámbito separado.

Entonces puede usar una variable para la referencia de su plantilla

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

y debería funcionar porque ya ha declarado dentro <ng-template ngFor

Ejemplo de plunker

Para obtener más detalles, consulte también:

• angular - templateref duplicado condicional en ng-content con selector

Esta es la mejor solución que he encontrado: https://stackoverflow.com/a/40165639/3870815

En esa respuesta usan:

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

Para construir una lista de esos componentes generados dinámicamente. ¡Te recomiendo que lo pruebes!

Otra forma de permitir esto es crear un componente que envuelva el botón y la plantilla ng

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

Y tenga lo siguiente en el componente de botón de 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>

Puedes usar trackBy: trackByFnen*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>