Quelle est la différence entre [ngFor] et [ngForOf] dans angular2?
Selon ma compréhension, les Deux font la même fonctions. Mais,
ngFordes œuvres comme collections?ngForOfdes œuvres comme génériques?
Est-ce que ma compréhension est correcte? ou Pourriez-vous partager plus de différences (détails) sur
ngForetngForOf?
5 réponses
ngFor et ngForOf ne sont pas deux choses distinctes - ils sont en fait les sélecteurs de la directive NgForOf.
Si vous examinez la source , vous verrez que la directive NgForOf a comme sélecteur: [ngFor][ngForOf], ce qui signifie que les deux attributs doivent être présents sur un élément pour que la directive "active" pour ainsi dire.
Lorsque vous utilisez *ngFor, le compilateur angulaire décompose cette syntaxe dans sa forme cannonique qui a les deux attributs sur le élément.
Donc,
<div *ngFor="let item of items"></div>
Desugars à:
<template [ngFor]="let item of items">
<div></div>
</template>
Ce premier dégazage est dû au '*'. Le prochain dégazage est dû à la syntaxe micro: "let item of items". Le compilateur angulaire dés-sucres qui à:
<template ngFor let-item="$implicit" [ngForOf]="items">
<div>...</div>
</template>
(où vous pouvez penser à $implicite comme une variable interne de la directive utilise pour se référer à l'élément courant dans l'itération).
Dans sa forme canonique, l'attribut ngFor n'est qu'un marqueur, tandis que l'attribut ngForOf est en fait, une entrée à la directive qui pointe vers la liste des choses que vous voulez parcourir.
Vous pouvez consulter le Angular microsyntax guide pour en savoir plus.
ngFor est une directive structurelle D'angulaire qui remplace l'attribut ng-repeat de AngularJS
, Vous pouvez utiliser ngFor comme une abréviation
<li *ngFor="let item of items">{{item.name}}</li>
Ou comme version à main longue
<template ngFor let-item="$implicit" [ngForOf]="items">
{{item.name}}
</template>
NgFor peut itérer un tableau mais dans ngContainer, ngContent nous ne pouvons pas itérer ngFor directement donc pour itérer nous peut utiliser [ngForOf] . Ici, i est variable, ratings est un tableau.
Ex.
<ng-template ngFor let-i [ngForOf]="ratings">
<option *ngIf="i<=22" [ngValue]="i">{{i}}:00 Hrs.</option>
</ng-template>
Dans cet exemple, je veux appliquer un ngFor et ngIf simultanément, donc je l'ai utilisé.
L'autre vue est qu'à une normale si nous appliquons ngFor alors au rendu il le convertit en
<template ngFor let-i [ngForOf]="ratings">
<HTML Element>...</HTML Element>
</template>
À mon avis, ce que j'ai obtenu du document angulaire,
-
[ngFor]n'est pastype safe -
[NgForOf]esttype safe
Parce que les deux détails de classe sont peu différents
ngForClasse est de typeanyde typeMais
ngForOfle détail de la classe estngForOf : NgIterable<T>
ngForOf on dirait des génériques que j'ai déjà mentionnés dans ma question.