web-dev-qa-db-fra.com

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

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

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

angulartypescriptngfor
39
Ramesh Rajendran

ngFor et ngForOf ne sont pas deux choses distinctes, ce sont en réalité les sélecteurs de la directive NgForOf.

Si vous examinez le source , vous verrez que la directive NgForOf a pour 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 canonique qui comporte les deux attributs sur l'élément.

Alors,

  <div *ngFor="let item of items"></div>

desugars to:

 <template [ngFor]="let item of items">
     <div></div>
 </template>

Cette première réduction de sucre est due au '*'. La prochaine réduction est due à la micro syntaxe: "let item of items". Le compilateur angulaire de-sucres cela pour:

 <template ngFor let-item="$implicit" [ngForOf]="items">
   <div>...</div>
 </template>

(où vous pouvez considérer $ implicite comme une variable interne que la directive utilise pour faire référence à l'élément actuel de l'itération).

Dans sa forme canonique, l'attribut ngFor n'est qu'un marqueur, tandis que l'attribut ngForOf est en réalité une entrée de la directive qui pointe vers la liste des éléments sur lesquels vous souhaitez effectuer une itération.

Vous pouvez consulter le Guide de microsyntaxe angulaire pour en savoir plus.

54
snorkpete

ngFor est une directive structurelle de Angular qui remplace l'attribut ng-repeat de AngularJS.

Vous pouvez utiliser ngFor comme raccourci

<li *ngFor="let item of items">{{item.name}}</li>

ou comme version longue main

<template ngFor let-item="$implicit" [ngForOf]="items">
  {{item.name}}
</template>
5
devnull69

A mon avis, ce que je tire du document angulaire,

  • [ngFor] n'est pastype safe
  • [NgForOf] esttype safe 

Parce que les détails de la classe sont peu différents 

  • ngFor Le type de classe est any type 

  • Mais le détail de la classe ngForOf est ngForOf : NgIterable<T>

ngForOf ressemble à des génériques que j'ai déjà mentionnés dans ma question. 

1
Ramesh Rajendran

NgFor peut itérer un tableau, mais dans ngContainer, ngContent, nous ne pouvons pas itérer ngFor directement, donc pour itérer, nous pouvons utiliser [ngForOf]. Ici, je suis variable, les évaluations sont 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 simultanément ngFor et ngIf, je l’ai donc utilisé.

L’autre point de vue est qu’à la normale si nous appliquons ngFor, au rendu, il le convertit en

<template ngFor let-i [ngForOf]="ratings">
   <HTML Element>...</HTML Element>
 </template>
1
rajeev omar

Version explicite

  • (<template ngFor ...>) permet d'appliquer la directive à plusieurs éléments à la fois

Version implicite

  • enveloppe uniquement l'élément où il est appliqué
0
user7427848