迭代枚举 angular ngFor - JavaScript

在 Angular 应用中，经常需要对数组进行迭代和枚举。NgFor 指令是 Angular 中一种浅显易懂的方式，用来将数组中的元素循环输出。下面通过几个实例详细介绍 ngFor 指令的使用。

基本使用

ngFor 指令可以通过以下方式引入：

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

其中 items 是一个数组，*ngFor 指令用于循环输出 items 中的每个元素。通过 let item 声明了一个变量 item，用于存储当前循环的元素，然后在循环体中使用这个变量输出元素的值。

索引值

有时候需要在循环体内使用每个元素在数组中的索引，可以通过 $index 变量实现：

<div *ngFor="let item of items; let i = index">{{ i + 1 }} - {{ item }}</div>

上例中通过 let i = index 声明了一个变量 i，表示当前元素在数组中的索引，然后在循环体中使用这个变量输出索引值。

过滤排序

ngFor 指令还可以进行过滤和排序操作。比如，可以只显示数组中符合某个条件的元素：

<div *ngFor="let item of items | filter: 'xxx'">{{ item }}</div>

这里使用了 Angular 内置的 filter 管道，'xxx' 为过滤条件。类似地，还可以使用 orderBy 管道实现排序：

<div *ngFor="let item of items | orderBy">{{ item }}</div>

嵌套循环

有时候需要在循环体中嵌套另一个循环，可以通过在循环体内部再次使用 ngFor 指令实现：

<div *ngFor="let item of items">
  <h2>{{ item.title }}</h2>
  <ul>
    <li *ngFor="let subitem of item.subitems">{{ subitem }}</li>
  </ul>
</div>

上例中外层循环遍历了一个对象数组 items，内层循环则是遍历了每个对象中的 subitems 数组。

总结

ngFor 指令是 Angular 应用中常用的迭代枚举手段之一，它可以帮助我们在模板中展现数组中的元素，并且还支持一些常用的过滤和排序操作。掌握 ngFor 指令的使用是 Angular 开发的入门技能之一。