array - ngfor angular 6 example

¿Cuál es el significado de*en*ngFor en angular2?

Question

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

Answer 1

Cita de la https://angular.io/api/common/NgForOf oficial de https://angular.io/api/common/NgForOf :

Cuando revisamos las NgFor incorporadas NgFor y NgIf , 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 , NgIf y NgSwitch agregan 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>

Answer 2

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>

Answer 3

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.

Answer 4

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 .

Answer 5

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

Ejemplo de plunker

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="..." .