Quelle est la différence entre [ngFor] et [ngForOf] dans angular2?

Selon ma compréhension, les Deux font la même fonctions. Mais,

ngFor des œuvres comme collections?
ngForOf des œuvres comme les génériques?

Est ma compréhension est correcte? ou
Pourriez-vous s'il vous plaît partager plus de différence(les détails) sur ngFor et ngForOf?

Bonne question! je voulais aussi poser! btw, vos liens pour les deux collections et génériques sont les mêmes
Faute de frappe question. Désolé pour ça. Maintenant, j'ai mis à jour ma question. merci
github.com/angular/angular/commit/...
bonne prise. Il semble que la classe était déjà NgFor et il a été changé dans le mouvement de l'angulaire de la v4, et l'essentiel, c'est que nous en tant que communauté étaient pas plus sage. Génial rétro-compatibilité

InformationsquelleAutor Ramesh Rajendran | 2017-04-13

57

ngFor et ngForOf ne sont pas deux choses distinctes - ils sont en fait les sélecteurs de la NgForOf directive.

Si vous examinez le source, vous verrez que le NgForOf directive a pour son sélecteur: [ngFor][ngForOf] , ce qui signifie que les deux attributs doivent être présents sur un élément de la directive "activer" pour ainsi dire.

Lorsque vous utilisez *ngFor, l'angle de compilateur de sucres que de la syntaxe dans ses cannonical forme qui possède à la fois les attributs de l'élément.

Donc,
```
  <div *ngFor="let item of items"></div>
```
desugars à:
```
 <template [ngFor]="let item of items">
     <div></div>
 </template>
```
Cette première de la miellée est due à la '*'. Le côté de la cabane à sucre est à cause de la micro-syntaxe: "laissez élément d'éléments". L'angle de compilateur de sucres que de:
```
 <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, le ngFor attribut est juste un marqueur, tandis que le ngForOf attribut est une entrée de la directive que les points à la liste des choses que vous voulez parcourir.

Vous pouvez consulter le Angulaire microsyntax guide pour en savoir plus.
- N'est-ce pas ngFor le réel directive, alors que ngForOf est "juste" une propriété de la "dé-sucrée" version?
- eh bien, techniquement, ngForOf est le nom de la classe qui implémente la directive (voir la source). C'est juste que personne ne fait en réalité référence à par ce nom - ngFor est fondamentalement la façon dont ses visée à l'ensemble de la documentation et des conversations.
- Votre desugaring les exemples en sont tout à fait tort. Je ne pense pas qu'il y a 2 étapes et le résultat final serait <template ngFor let-item="$implicit" [ngForOf]="items"> </template>
- vous avez raison, j'ai mis les directives dans le mauvais endroit - j'ai mis à jour les exemples de code. Et vous êtes sans doute aussi à droite que le de-des sucres qui se passe en une seule étape, mais je pense que dans ce cas, il est utile de séparer les desugaring de la structure de la directive de l'desugaring de la micro-syntaxe pour montrer qu'ils sont (relativement) indépendant choses
InformationsquelleAutor snorkpete
5

ngFor est structurelle de la directive Angulaire qui remplace le ng-repeat attribut de AngularJS

Vous pouvez utiliser ngFor comme une abréviation
```
<li *ngFor="let item of items">{{item.name}}</li>
```
ou que la main de la version
```
<template ngFor let-item="$implicit" [ngForOf]="items">
  {{item.name}}
</template>
```
- shorthand et longhand signifie pas la taille des données? ou quoi?
- Cela signifie: Différence d'utilisation pour le même but et de l'effet
- Ok, maintenant je comprends. Mais à chaque fois que je vois cette ligne dans le document ngForOf: NgIterable<T>: The value of the iterable expression. Useful when the expression is more complex then a property access, for example when using the async pipe (userStreams | async). vraiment pas compréhensible.
- Disons que votre items collection n'est pas une simple collection, mais plutôt une collection qui n'est pas encore disponible et ne sera disponible qu'après un certain appel asynchrone. Donc vous n'aurez pas items encore, mais seulement Observable ou de la Promesse (appelons futureItems). Dans ce cas, vous souhaitez utiliser la async pipe let item of (futureItems|async) qui n'est pas possible. Mais vous pouvez utiliser le longhand version avec [ngForOf]="futureItems | async"
InformationsquelleAutor devnull69
1

NgFor pouvez parcourir un tableau, mais dans ngContainer, ngContent nous ne pouvons itérer ngFor directement donc Pour l'itération nous
pouvez utiliser [ngForOf] . Ici, je est variable, notes, c'est un tableau.

Ex.
```
 <ng-template ngFor let-i [ngForOf]="ratings">
                  <option *ngIf="i<=22" [ngValue]="i">{{i}}:00 Hrs.</option>
   </ng-template>
```
À cet exemple, je veux appliquer un ngFor et ngIf simultanément, je l'ai donc utilisé.

L'autre point de vue, est qu'à la normale si l'on applique ngFor puis au rendu il convertit en
```
<template ngFor let-i [ngForOf]="ratings">
   <HTML Element>...</HTML Element>
 </template>
```
InformationsquelleAutor rajeev omar
1

À mon avis, ce que j'ai obtenu à partir de l'angle de document,
- [ngFor] n'est pas type safe
- [NgForOf] est type safe
Parce que classe à la fois les détails sont peu différents
- ngFor Classe est de type any type
- Mais ngForOf classe de détail est
  ngForOf : NgIterable<T>
ngForOf ressemble génériques que j'ai déjà mentionné dans ma question.
- Intéressant. Cependant, depuis qu'ils sont utilisés à partir de l'intérieur de modèles, c'est important, moins dans la pratique qu'il ne le ferait autrement. Cela dit, le nombre de Angulaire de l'Api, y compris ceux qui ne sont pas destinés à l'utilisation du modèle comme FormBuilder, qui ne sont pas de type de vérification est troublant.
InformationsquelleAutor Ramesh Rajendran
0

Explicit version
- (<template ngFor ...>) permet d'appliquer la directive à plusieurs éléments à la fois
Implicite version
- seulement encapsule l'élément sur lequel il est appliqué
InformationsquelleAutor

Vous devez vous connecter pour publier un commentaire.