number - Variable de referencia de plantilla dinámica dentro de ngFor(Angular 2)

ngfor number

Question

¿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 de 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 de 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?

Answer 1

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. Le recomiendo que lo revise!

Answer 2

Las variables de referencia de plantilla se definen en la plantilla en la que se definen. Una directiva estructural crea una plantilla anidada y, por lo tanto, introduce un ámbito separado.

Entonces puede usar una variable para su referencia de 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 de <ng-template ngFor

Ejemplo de Plunker

Para más detalles ver también:

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