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

【问题标题】：What is the difference between [ngFor] and [ngForOf] in angular2?angular2中的[ngFor]和[ngForOf]有什么区别？
【发布时间】：2017-09-09 09:02:42
【问题描述】：

据我了解，两者的功能相同。但是，

ngFor 的工作方式类似于 collections?。
ngForOf 的工作方式类似于generics?。

我的理解正确吗？要么您能否分享更多关于ngFor 和ngForOf 的差异（详细信息）？

【问题讨论】：

好问题！我也想问！顺便说一句，您的集合和泛型的链接是相同的
@Sajeetharan 错字问题。对此感到抱歉。现在我更新了我的问题。谢谢
github.com/angular/angular/commit/…
@yurzui，很好的收获。所以看起来这个类以前是 NgFor 并且在迁移到 angular v4 时发生了变化，关键是我们作为一个社区并没有变得更聪明。令人敬畏的向后兼容性

标签： angular typescript ngfor

【解决方案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 了解更多信息。

【讨论】：

ngFor 不是实际指令，而 ngForOf 只是“去糖”版本的属性？
好吧，从技术上讲，ngForOf 是实现指令的类的名称（再次，请参阅源代码）。只是没有人真正用这个名字来引用它——ngFor 基本上是所有文档和对话中对它的引用。
您的脱糖示例都完全错误。我不认为有 2 个步骤，最终结果将是 <template ngFor let-item="$implicit" [ngForOf]="items"> </template>
@GünterZöchbauer，你是对的——我把指令放在了错误的地方——我更新了代码示例。而且你可能也是对的，脱糖只发生在一个步骤中，但我认为在这种情况下，将结构指令的脱糖与 let 微语法的脱糖分开来表明它们是有用的（相对）独立的事物

【解决方案2】：

ngFor 是 Angular 的结构指令，它取代了 AngularJS 的 ng-repeat 属性

您可以使用ngFor 作为简写

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

或作为速记版本

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

【讨论】：

shorthand 和 longhand 表示没有数据大小？还是什么？
意思是：同一目的和效果的不同用法
好的，现在我明白了。但每当我在文档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). 中看到这一行时，真的无法理解。
假设您的items 集合不是一个简单的集合，而是一个尚不可用且仅在一些异步调用后才可用的集合。所以你不会有items，而只有一个 Observable 或 Promise（我们称之为 futureItems）。在这种情况下，您想使用异步管道let item of (futureItems|async)，这是不可能的。但是您可以使用带有[ngForOf]="futureItems | async" 的简写版本

【解决方案3】：

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

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

因为两个类的细节差别不大

ngFor类类型为any类型
但是ngForOf 类类型是通用的 ngForOf : NgIterable<T>

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

【讨论】：

有趣。但是，由于它们是在模板中使用的，因此这在实践中的重要性不如其他情况。也就是说，Angular API 的数量，包括那些不适合模板使用的 API，例如 FormBuilder，它们没有经过类型检查。

【解决方案4】：

显式版本

(<template ngFor ...>) 允许一次将指令应用于多个元素

隐式版本

只包装应用它的元素

【讨论】：

【解决方案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>

【讨论】：