tag - ngfor index angular 6
¿Qué es let-*en las plantillas de Angular 2? (1)
actualizar Angular 5
ngOutletContext
fue renombrado a
ngTemplateOutletContext
Ver también https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
original
Las plantillas (
<template>
o
<ng-template>
desde 4.x) se agregan como vistas incrustadas y se les pasa un contexto.
Con
let-col
la propiedad de contexto
$implicit
está disponible como
col
dentro de la plantilla para enlaces.
Con
let-foo="bar"
la
bar
propiedades de contexto está disponible como
foo
.
Por ejemplo, si agrega una plantilla
<ng-template #myTemplate let-col let-foo="bar">
<div>{{col}}</div>
<div>{{foo}}</div>
</ng-template>
<!-- render above template with a custom context -->
<ng-template [ngTemplateOutlet]="myTemplate"
[ngTemplateOutletContext]="{
$implicit: ''some col value'',
bar: ''some bar value''
}"
></ng-template>
Vea también esta respuesta y ViewContainerRef#createEmbeddedView .
*ngFor
también funciona de esta manera.
La sintaxis canónica lo hace más obvio.
<ng-template let-item [ngForOf]="items" let-i="index" let-odd="odd">
<div>{{item}}
</ng-template>
donde
NgFor
agrega la plantilla como vista incrustada al DOM para cada
item
de
items
y agrega algunos valores (
item
,
index
,
odd
) al contexto.
Consulte también Uso de $ implict para pasar múltiples parámetros
Encontré una sintaxis de asignación extraña dentro de una plantilla Angular 2.
<template let-col let-car="rowData" pTemplate="body">
<span [style.color]="car[col.field]">{{car[col.field]}}</span>
</template>
Parece que
let-col
y
let-car="rowData"
crean dos nuevas variables
col
y
car
que luego pueden vincularse dentro de la plantilla.
Fuente: https://www.primefaces.org/primeng/#/datatable/templating
¿Cómo se llama esta sintaxis mágica
let-*
?
¿Como funciona?
¿Cuál es la diferencia entre
let-something
y
let-something="something else"
?