D'après ce que j'ai compris, Les deux font la même chose fonctions. Mais,
ngFor serait le suivant collections ?.
ngForOf serait le suivant génériques ?.
Ma compréhension est-elle correcte ? ou Pourriez-vous s'il vous plaît partager plus de différences (détails) à propos de
ngForyngForOf?
ngFor et ngForOf ne sont pas deux choses distinctes : ce sont en fait les sélecteurs de la directive NgForOf.
Si vous examinez le fuente vous verrez que la directive NgForOf a comme sélecteur : [ngFor][ngForOf] Cela signifie que les deux attributs doivent être présents sur un élément pour que la directive soit "activée", pour ainsi dire.
Lorsque vous utilisez *ngFor Le compilateur Angular simplifie cette syntaxe en la ramenant à sa forme classique, qui comporte les deux attributs sur l'élément.
Donc,
<div *ngFor="let item of items"></div>desugar à :
<template [ngFor]="let item of items">
<div></div>
</template>Ce premier désamorçage est dû au "*". Le désensorcellement suivant est dû à la micro-syntaxe : "let item of items". Le compilateur Angular désensorcelle cela en :
<template ngFor let-item="$implicit" [ngForOf]="items">
<div>...</div>
</template>(où l'on peut considérer $implicit comme une variable interne que la directive utilise pour se référer à l'élément actuel 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 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 la microsyntaxe angulaire pour en savoir plus.
N'est-ce pas ? ngFor la directive proprement dite alors que ngForOf est-ce que "juste" est une propriété de la version "désucrée" ?
En fait, techniquement, ngForOf est le nom de la classe qui implémente la directive (voir la source). C'est juste que personne ne s'y réfère par ce nom - ngFor est en fait la façon dont elle est désignée dans toute la documentation et les conversations.
Vos exemples de désamorçage sont tous deux erronés. Je ne pense pas qu'il y ait 2 étapes, et le résultat final serait <template ngFor let-item="$implicit" [ngForOf]="items"> </template>
ngFor est une directive structurelle d'Angular qui remplace la directive ng-repeat de l'attribut AngularJS
Vous pouvez utiliser ngFor en abrégé
<li *ngFor="let item of items">{{item.name}}</li>ou comme la version longue
<template ngFor let-item="$implicit" [ngForOf]="items">
{{item.name}}
</template>
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.
A mon avis, ce que j'ai obtenu du document angulaire,
[ngFor] es no type safe
[NgForOf] es type safe
Parce que les détails des deux classes sont un peu différents
ngFor Le type de classe est any type
Mais ngForOf le type de classe est générique ngForOf : NgIterable<T>
ngForOf ressemble aux génériques que j'ai déjà mentionnés dans ma question.
Intéressant. Cependant, étant donné qu'elles sont utilisées à partir de modèles, cela a moins d'importance dans la pratique qu'autrement. Cela dit, le nombre d'API Angular, y compris celles qui ne sont pas destinées à être utilisées dans des templates, telles que FormBuilder qui ne sont pas contrôlés par type est troublant.
NgFor peut itérer un tableau mais dans ngContainer, ngContent nous ne pouvons pas itérer ngFor directement. pouvons utiliser [ngForOf]. Ici, i est une 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 un ngIf simultanément, donc je l'ai utilisé.
L'autre point de vue est que si nous appliquons ngFor à une situation normale, au moment du rendu il la convertit en
<template ngFor let-i [ngForOf]="ratings">
<HTML Element>...</HTML Element>
</template>
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
4 votes
Bonne question ! Je voulais aussi demander ! En fait, vos liens pour les collections et les génériques sont les mêmes.
1 votes
@Sajeetharan Problème de frappe. Désolé pour cela. J'ai maintenant mis à jour ma question.
5 votes
github.com/angular/angular/commit/
1 votes
@yurzui, bien vu. Il semble donc que la classe était précédemment NgFor et qu'elle a été modifiée lors du passage à angular v4, et l'élément clé est que nous, en tant que communauté, n'étions pas les plus sages. Superbe rétrocompatibilité