Question

*ngFor='let n in list'和*ngFor='let n of list'有什么区别我最近偶然发现了它。通过一些旧问题搜索无法找到满意的答案。

Answer 1

语法

*ngFor='let n in list'

无效的Angular语法。

要证明这一点，请使用最小的app.component.ts文件创建一个新的角度项目：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let n in list">{{n}}</li>
  </ul>
  `
})
export class AppComponent {
  public list = [1,2,3,4,5];
}

导致错误

compiler.js:486 Uncaught Error: Template parse errors:
Can't bind to 'ngForIn' since it isn't a known property of 'li'. ("
  <ul>
    <li [ERROR ->]*ngFor="let n in list">{{n}}</li>
  </ul>
  "): ng:///AppModule/AppComponent.html@2:8
Property binding ngForIn not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
  <ul>
    [ERROR ->]<li *ngFor="let n in list">{{n}}</li>
  </ul>

不过，您可以创建一个自定义指令来处理此问题（如this article中所述）。

关于和之间的区别，文章中提到了以下内容：

NgFor与Angular在JavaScript中的for…of语句等效，它遍历一个可迭代的对象，并将其每个值一个接一个地获取。还有一个for ... in语句，它循环访问对象的可枚举属性，但是没有Angular等效项，所以让我们做一个。

Answer 2

在JavaScript中

for…in语句中的语句，而是迭代对象的可枚举属性

和

for…of语句遍历一个可迭代对象，将其每个值一个接一个地

角度2：* ngFor变体

2 个答案: