使用角度 foreach 指令进行 HTML 循环

在 Angular 中，通过指令可以方便地在 HTML 模板上实现循环。其中，*ngFor 指令就是 Angular 提供的用于遍历数组的循环指令。

语法

*ngFor 指令的基本语法如下所示：

<element *ngFor="let item of items; let i = index">
  <!-- 元素内容 -->
</element>

其中，items 是被循环遍历的数组，item 表示当前循环遍历到的数组元素。i 表示当前数组元素的索引值。

示例

下面是一个使用 *ngFor 指令循环遍历数组的示例：

<ul>
  <li *ngFor="let fruit of fruits; let i = index">
    {{ i+1 }}. {{ fruit }}
  </li>
</ul>

在这个例子中，fruits 是一个包含了多个字符串的数组。通过 *ngFor 指令循环遍历这个数组，生成与数组元素数目相同的 li 元素。在每个 li 元素中，通过插值表达式 {{ fruit }} 显示当前循环遍历到的数组元素，并通过 {{ i+1 }} 显示当前数组元素的序号。

相关注意事项

• 在使用 *ngFor 指令时，要注意每个生成的元素都必须有唯一的标识符。否则，Angular 的数据绑定机制将无法正确地识别和更新这些元素。可以使用 trackBy 属性指定元素的标识符。例如：

  <ul>
    <li *ngFor="let fruit of fruits; trackBy: trackById">
      {{ fruit }}
    </li>
  </ul>
  

  其中，trackById 是一个方法，用于根据元素的内容生成唯一的标识符。在组件代码中，需要定义这个方法：

  trackById(index: number, fruit: Fruit): number {
    return fruit.id;
  }
  

• 在遍历对象属性时，可以使用 *ngFor 指令。例如：

  <ul>
    <li *ngFor="let point of points">
      {{ point.x }}, {{ point.y }}
    </li>
  </ul>
  

  在组件代码中，points 可以是一个对象数组：

  points = [{x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 4}];
  

参考资料

• Angular 模板语法： *ngFor 指令