使用 ngFor 循环输出数据

在 Angular 应用程序的开发中，你经常需要遍历数组或其他数据集合并输出内容。为此，Angular 提供了 ngFor 指令，该指令通过循环遍历数据集合并将其绑定到模板中。

基础语法

ngFor 指令的基础语法如下：

<element *ngFor="let item of items">
  ...
</element>

其中，element 表示需要遍历渲染的元素，items 为遍历的数据集合，item 为遍历时当前的元素。

例如，假设有如下数组：

items = [1, 2, 3, 4, 5];

使用 ngFor 指令可如下遍历输出：

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

带索引遍历

ngFor 指令还支持在遍历时获取当前元素的索引，语法如下：

<element *ngFor="let item of items; let i = index">
  ...
</element>

其中，i 为当前元素的索引。

例如，遍历如下数组：

items = ["apple", "banana", "cherry"];

可如下遍历输出：

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

带判断条件遍历

ngFor 指令还支持在遍历时进行条件判断，只渲染符合条件的元素，语法如下：

<element *ngFor="let item of items; let i = index; let even = even">
  ...
</element>

其中，even 表示当前元素是否为偶数。

例如，遍历如下数组：

items = [1, 2, 3, 4, 5];

可如下遍历输出：

<ul>
  <li *ngFor="let item of items; let i = index; let even = even">{{ item }}<sup *ngIf="even">*</sup></li>
</ul>

带对象数组遍历

如果遍历数据为一个对象数组，则需要使用对象的属性来输出内容，语法如下：

<element *ngFor="let item of items">
  {{ item.property }}
</element>

例如，遍历如下对象数组：

items = [
  { id: 1, name: 'apple' },
  { id: 2, name: 'banana' },
  { id: 3, name: 'cherry' }
];

可如下遍历输出：

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

总结

ngFor 指令是循环遍历的核心指令之一，它能方便地遍历数组、对象数组等集合数据并将其输出到模板中。掌握 ngFor 指令的使用方法，可以使开发效率更高，代码更简洁易读。