¿Cuál es la diferencia entre [ngFor] y [NgForOf] en angular2?
Según mi entendimiento, Ambos están haciendo las mismas funciones. Pero,
ngForobras como colecciones?ngForOfobras como genéricos?
¿Mi entendimiento es correcto? o ¿Podría por favor compartir más diferencias (detalles) sobre
ngForyngForOf?
5 answers
ngFor y ngForOf no son dos cosas distintas - en realidad son los selectores de la directiva NgForOf.
Si examina la fuente , verá que la directiva NgForOf tiene como selector: [ngFor][ngForOf], lo que significa que ambos atributos deben estar presentes en un elemento para que la directiva se 'active', por así decirlo.
Cuando se utiliza *ngFor, el compilador Angular de-azúcares que la sintaxis en su forma cannonical que tiene ambos atributos en el elemento.
Así que,
<div *ngFor="let item of items"></div>
Desugars a:
<template [ngFor]="let item of items">
<div></div>
</template>
Este primer des-azucarado se debe al '*'. El siguiente des-azucarado es debido a la sintaxis micro: "let item of items". El compilador Angular de-azúcares que a:
<template ngFor let-item="$implicit" [ngForOf]="items">
<div>...</div>
</template>
(donde se puede pensar en implicit implicit como una variable interna que la directiva utiliza para referirse al elemento actual en la iteración).
En su forma canónica, el atributo ngFor es solo un marcador, mientras que el atributo NgForOf es en realidad, una entrada a la directiva que apunta a la lista de cosas que desea repetir.
Puede consultar la guía de microsintaxis angular para obtener más información.
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-19 10:04:26
ngFor es una directiva estructural de Angular que reemplaza el atributo ng-repeat de AngularJS
Puedes usar ngFor como abreviatura
<li *ngFor="let item of items">{{item.name}}</li>
O como la versión de mano larga
<template ngFor let-item="$implicit" [ngForOf]="items">
{{item.name}}
</template>
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-04-13 10:06:13
NgFor puede iterar una matriz, pero en ngContainer, ngContent no podemos iterar ngFor directamente, por lo que Para iterar puede usar [NgForOf]. Aquí i es variable, clasificaciones es una matriz.
Ex.
<ng-template ngFor let-i [ngForOf]="ratings">
<option *ngIf="i<=22" [ngValue]="i">{{i}}:00 Hrs.</option>
</ng-template>
En este ejemplo, quiero aplicar un ngFor y ngIf simultáneamente, así que lo usé.
El otro punto de vista es que en una normal si aplicamos ngFor entonces en la representación lo convierte en
<template ngFor let-i [ngForOf]="ratings">
<HTML Element>...</HTML Element>
</template>
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-02-16 07:09:08
En mi opinión lo que obtuve del documento angular,
-
[ngFor]no estype safe -
[NgForOf]estype safe
Porque ambos detalles de la clase son poco diferentes
-
ngForEl tipo de clase esanytipo Pero
ngForOfel detalle de la clase esngForOf : NgIterable<T>
ngForOf parecen genéricos que ya he mencionado en mi pregunta.
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-02-19 00:53:44
Versión explícita
-
(<template ngFor ...>)permite aplicar la directiva a múltiples elementos a la vez
Versión implícita
- solo envuelve el elemento donde se aplica