angular2中的[ngFor]和[ngForOf]有啥区别？
Posted
技术标签:
【中文标题】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 时发生了变化，关键是我们作为一个社区并没有变得更聪明。令人敬畏的向后兼容性 【参考方案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>
【讨论】：
以上是关于angular2中的[ngFor]和[ngForOf]有啥区别？的主要内容，如果未能解决你的问题，请参考以下文章
ngFor 中的 Angular2 组件抛出错误（viewFactory 不是函数）