array - ngfor angular 6 example
¿Cuál es el significado de*en*ngFor en angular2? (5)
Cita de la https://angular.io/api/common/NgForOf oficial de https://angular.io/api/common/NgForOf :
Cuando revisamos las
NgForincorporadasNgForyNgIf, llamamos una rareza de la sintaxis: el asterisco (*) que aparece antes del nombre de la directiva.El
*es un poco de azúcar sintáctica que facilita la lectura y escritura de directivas que modifican el diseño HTML con la ayuda de plantillas.NgFor,NgIfyNgSwitchagregan y eliminan subárboles de elementos que están envueltos en etiquetas<template>.
Para más detalles por favor revise
https://angular.io/guide/template-syntax#built-in-structural-directives
https://angular.io/guide/structural-directives#asterisk
* ngFor tiene cuatro propiedades: índice , último , par e impar . Podemos obtener el valor del índice por iteración, el último valor, impar o incluso el propio índice utilizando variables locales. Aquí hay un ejemplo de trabajo:
demoArray= [1,2,3,4,5,6,7,8,8,9];
<ul>
<li *ngFor=''#item of demoArray #i=index #l=last #e=even''>
Item value is : {{item}} has index value is : {{i}} and last value is :{{l}} even index :{{e}}</li>
</ul>
¿Cuál es el significado de * antes de ngFor en la siguiente muestra y por qué es necesario?
<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</div>
Cuando Angular ve el asterisco (*) en ngFor, utilizará su elemento DOM como plantilla para representar el bucle.
<div *ngFor="#hero of heroes">
{{ hero.name }}
</div>
es equivalente a
<template ngFor #hero [ngForOf]="heroes">
<div>
{{ hero.name }}
</div>
</template>
En *ngFor * es una abreviatura para usar la nueva sintaxis de plantilla angular con una etiqueta de plantilla, esto también se denomina Directiva estructural. Es útil saber que * es solo una abreviatura para definir explícitamente los enlaces de datos en una etiqueta de plantilla.
Se les conoce como directivas estructurales, porque tienen la capacidad de cambiar la estructura DOM. Para obtener más información, puede visitar https://angular.io/guide/structural-directives .
ngFor solo se puede aplicar a un <template> . *ngFor es la forma abreviada que se puede aplicar a cualquier elemento y el elemento <template> se crea implícitamente detrás de la escena.
https://angular.io/api/common/NgForOf
Sintaxis
<li *ngFor="let item of items; let i = index">...</li><li template="ngFor let item of items; let i = index">...</li><template ngFor let-item [ngForOf]="items" let-i="index"><li>...</li>
Es el mismo patrón para todas las directivas estructurales
actualizar
Con la versión final 2.0.0 se introdujo <ng-container> , que se comporta como <template> (un elemento de envoltura que no se agrega realmente al DOM) pero que admite la *ngFor="..." .