angular2 中的 [ngFor] 和 [ngForOf] 有什么区别？

Question

据我了解，两者都在执行相同的功能。但是，

Is my understanding is correct? or Could you please share more difference's(details) about ngFor and ngForOf?

Answer 1

ngFor 和 ngForOf 不是两个不同的东西——它们实际上是 NgForOf 指令的选择器。

如果你检查 source，你会看到 NgForOf 指令有一个选择器：[ngFor][ngForOf]，这意味着两个属性都需要出现在一个元素上，以便指令 'activate' 可以这么说。

当您使用 *ngFor 时，Angular 编译器将该语法去糖化为它的规范形式，该形式在元素上具有两个属性。

所以，

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

脱糖为：

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

第一次脱糖是因为'*'。接下来的脱糖是因为微语法："let item of items"。 Angular 编译器将其脱糖为：

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

（您可以将 $implicit 视为指令用来引用迭代中的当前项的内部变量）。

在其规范形式中，ngFor 属性只是一个标记，而 ngForOf 属性实际上是指向您要迭代的事物列表的指令的输入。

您可以查看 Angular microsyntax guide 以了解更多信息。

Answer 2

ngFor 是 Angular 的结构指令，它取代了 AngularJS

的 ng-repeat 属性

您可以将 ngFor 用作 shorthand

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

或作为手写版本

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

Answer 3

我认为我从 angular 文档中得到了什么，

因为两者 class 细节略有不同

ngForOf 看起来像我在问题中已经提到的泛型。

Answer 4

显式版本

隐式版本

Answer 5

NgFor可以迭代一个数组但是在ngContainer, ngContent中我们不能直接迭代ngFor所以对于迭代我们可以使用 [ngForOf] 。这里 i 是变量，ratings 是一个数组。

例如。

 <ng-template ngFor let-i [ngForOf]="ratings">
                  <option *ngIf="i<=22" [ngValue]="i">{{i}}:00 Hrs.</option>
   </ng-template>

在这个例子中，我想同时应用一个 ngFor 和 ngIf，所以我使用了它。

另一种观点是，在正常情况下，如果我们应用 ngFor 然后在渲染时将其转换为

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

What is the difference between [ngFor] and [ngForOf] in angular2?