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

Question

根据我的理解,两者都在做同样的功能.但,

• ngFor会像收藏品一样工作吗？

• ngForOf会像仿制药一样工作吗？

---

我的理解是否正确？或者你能否分享更多差异(细节)ngFor和ngForOf？

Answer 1

ngFor 而ngForOf不是两个不同的东西-它们实际上是NgForOf指令的选择.

如果您检查源代码,您将看到NgForOf指令具有其选择器:[ngFor][ngForOf]这意味着两个属性都需要存在于元素上,以便指令"激活".

当您使用时*ngFor,Angular编译器将该语法去糖化为其在元素上具有两个属性的cannonical形式.

所以,

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

desugars:

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

第一次脱糖是由于'*'.下一次去糖是因为微语法:"让项目项目".Angular编译器将其解释为:

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

(您可以将$ implicit视为指令用于引用迭代中当前项的内部变量).

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

您可以查看Angular microsyntax指南以了解更多信息.

Answer 2

ngFor是Angular的结构指令,它取代了ng-repeatAngularJS 的属性

你可以用它ngFor作为速记

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

或者作为速记版本

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

Answer 3

在我看来，我从 angular 文档中得到了什么，

• [ngFor]是不是 type safe
• [NgForOf] 是 type safe

因为两个班级的细节几乎没有什么不同

• ngFor类类型是any类型

• 但是ngForOf类类型是通用的 ngForOf : NgIterable<T>

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