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

Question

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

• ngFor 会像 collections 一样工作?.

• ngForOf 会像 generics 一样工作?.

---

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]，这意味着这两个属性都需要出现在元素上才能使指令“激活”可以这么说。

当您使用 *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了解更多。