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

¿Cuál es el significado de * antes de ngFor en la siguiente muestra y por qué se necesita?

<div *ngFor="#hero of heroes" (click)="selectHero(hero)">
  {{hero.name}}
</div>
 28
angular
Author: Vikram Babu Nagineni, 2016-02-19
Source

5 answers

ngFor solo se puede aplicar a <template>. *ngFor es la forma corta 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

Émbolo ejemplo

Update

Con la versión final 2.0.0 se introdujo <ng-container>, que se comporta como <template> (un elemento wrapper que en realidad no se agrega al DOM) pero soporta la sintaxis *ngFor="...".

 25
Author: Günter Zöchbauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-26 21:35:06

Cuando Angular ve el asterisco (*) en ngFor, usará su elemento DOM como plantilla para renderizar el bucle.

<div *ngFor="#hero of heroes">
  {{ hero.name }}
</div>

Es equivalente a

<template ngFor #hero [ngForOf]="heroes">
    <div>
       {{ hero.name }}
    </div>
</template>
 12
Author: K Ling,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-13 05:05:57

Cita de la documentación oficial Angular :

Cuando revisamos las directivas integradas NgFor y NgIf, llamamos una rareza de la sintaxis: el asterisco (*) que aparece antes de la nombre de la directiva.

El * es un poco de azúcar sintáctica que hace que sea más fácil de leer y escriba directivas que modifiquen el diseño HTML con la ayuda de plantillas. NgFor, NgIf, y NgSwitch todos agregan y eliminan subárboles de elementos que son envuelto en <template> Tags.

Para más detalles, consulte

Https://angular.io/guide/template-syntax#built-in-structural-directives

Https://angular.io/guide/structural-directives#asterisk

*ngFor tiene cuatro propiedades: índice, última, incluso, y impar. Podemos obtener el valor del índice por iteración, el último valor, impar, o incluso el propio índice usando variables locales. Aquí está un trabajo ejemplo:

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>
 5
Author: Pardeep Jain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-26 21:53:22

Se conocen como Directivas Estructurales, porque tienen la capacidad de cambiar la Estructura DOM. Para más información puede visitar https://angular.io/guide/structural-directives .

 1
Author: Hemal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-28 16:56:01

En *ngFor el * es una abreviatura para usar la nueva sintaxis de plantilla angular con una etiqueta de plantilla, esto también se llama estructural Directive.It es útil saber que * es solo una abreviatura para definir explícitamente los enlaces de datos en una etiqueta de plantilla.

 0
Author: Brijesh Mavani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-04 09:23:48