Angular 中的 *ngFor Directive

Angular 中的 *ngFor Directive 允许我们遍历一个集合，并针对集合中的每个元素插入 HTML 文本或组件的实例。同时，这个 directive 也提供了在循环过程中使用 index 和其他可重复并绑定到数据的属性的能力。

语法

<some-element *ngFor="let item of collection; index as i;"></some-element>

其中 some-element 是你需要 render 的元素或者 component。ngForOf 是 directive 的名字，它的参数是一个集合。

在上面的例子中，你可以见到 let item of collection 中的 item 是一个在每次循环中访问到的变量。collection 则是要循环遍历的集合。通常情况下，collection 值是在 component class 下的某个属性，可以把它绑定到模板中。最后，你可以看到 index as i，它定义了在循环时显示的 index 变量的名称。

示例

下面是一个示例，显示了如何使用 *ngFor directive 遍历一个数组：

<ul>
  <li *ngFor="let item of items; index as i;">
    {{i}} - {{item}}
  </li>
</ul>

上面的代码会在页面中显示一个带有项目编号的 unordered list，其每个项目都是数组中的一个元素。

迭代集合中的对象

如果遍历的集合是由 objects 组成的数组，你可以使用如下方式来访问对象中的属性：

<ul>
  <li *ngFor="let user of users">
    {{user.name}} ({{user.email}})
  </li>
</ul>

这里，我们遍历了一个对象数组 users , 对象具有 name 和 email 属性。

迭代 Map 中的 items

*ngFor directive 也可以用来遍历 Typescript 中的 Map 对象。在这种情况下，它会遍历 Map 中每一个 key-value pair。key 和 value 变量可以被使用，它们将分别包含 key 和 value 的值。

<ul>
  <li *ngFor="let item of items">
     {{item.key}}: {{item.value}}
  </li>
</ul>

下面是在 component class 中定义 的 items 对象：

items = new Map([
  ['name', 'John'],
  ['email', 'john@example.com'],
  ['age', '30']
]);

总结

Angular 中的 *ngFor directive 允许我们一次接一次地访问集合中的每个元素，并在使用相应的 HTML 或 components 的同时，也可以很容易地在循环过程中使用 index 和其他相关的属性。此外，*ngFor directive 还可以用来遍历 Javascript 中的对象和 Map 集合。