number - Variable de referencia de plantilla dinámica dentro de ngFor(Angular 2)
ngfor number (2)
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!
¿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?
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
Para más detalles ver también: