在 Angular 中，我们经常需要循环渲染列表，这时候就需要用到 ngFor 指令。ngFor 指令可以很方便地帮助我们循环渲染列表，让我们更加专注于业务逻辑的实现。本文将详细介绍 ngFor 指令的使用方法，并提供示例代码，帮助读者更好地理解和掌握这一技术。
ngFor 指令的基本用法
ngFor 指令的基本用法非常简单，只需要在模板中使用 *ngFor 指令即可。具体用法如下：
<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>上面的代码中，*ngFor 指令用于循环渲染列表中的每一项。其中，let item of items 表示将 items 数组中的每个元素依次赋值给 item 变量。在模板中，我们可以通过插值表达式 {{item}} 来使用 item 变量。
ngFor 指令的高级用法
除了基本用法外，ngFor 指令还支持多种高级用法，让我们可以更加灵活地控制循环渲染的过程。下面就来逐一介绍这些高级用法。
指定索引变量
在循环渲染列表时，有时候我们还需要知道当前项在列表中的索引。这时候，我们可以使用 ngFor 指令提供的 index 变量，代码如下：
<ul>
<li *ngFor="let item of items; index as i">{{i}} - {{item}}</li>
</ul>上面的代码中，index as i 表示将当前项在列表中的索引赋值给 i 变量。在模板中，我们可以通过插值表达式 {{i}} 来使用 i 变量。
指定迭代器
有时候，我们需要自定义循环渲染列表的迭代器。这时候，我们可以使用 ngFor 指令提供的 trackBy 函数来指定迭代器，代码如下：
<ul>
<li *ngFor="let item of items; trackBy: trackByFn">{{item}}</li>
</ul>上面的代码中，trackBy: trackByFn 表示使用 trackByFn 函数作为迭代器。trackByFn 函数需要返回一个唯一标识符，用于判断两个列表项是否相同。如果两个列表项的标识符相同，则认为它们是同一个列表项，不需要重新渲染。
循环嵌套
在实际开发中，我们常常需要循环嵌套来渲染复杂的列表结构。这时候，我们可以在 ngFor 指令中嵌套另一个 ngFor 指令，代码如下：
<ul>
<li *ngFor="let group of groups">
{{group.name}}
<ul>
<li *ngFor="let item of group.items">{{item}}</li>
</ul>
</li>
</ul>上面的代码中，我们首先循环渲染 groups 数组中的每个元素，然后在每个元素中再嵌套一个 ngFor 指令来循环渲染该元素中的 items 数组。
示例代码
为了帮助读者更好地理解和掌握 ngFor 指令的使用方法，下面提供一个完整的示例代码。该代码实现了一个简单的待办事项列表，可以添加和删除待办事项。
// javascriptcn.com 代码示例
<!-- app.component.html -->
<h1>待办事项列表</h1>
<input [(ngModel)]="newItem" placeholder="请输入待办事项">
<button (click)="addItem()">添加</button>
<ul>
<li *ngFor="let item of items; index as i; trackBy: trackByFn">
{{i + 1}} - {{item}}
<button (click)="removeItem(i)">删除</button>
</li>
</ul>// javascriptcn.com 代码示例
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
items: string[] = ['学习 Angular', '学习 TypeScript', '学习 RxJS'];
newItem: string = '';
addItem() {
if (this.newItem.trim() !== '') {
this.items.push(this.newItem.trim());
this.newItem = '';
}
}
removeItem(index: number) {
this.items.splice(index, 1);
}
trackByFn(index: number, item: string) {
return item;
}
}上面的代码中，我们首先定义了一个 items 数组来存储待办事项。然后，在模板中使用 ngFor 指令循环渲染该数组中的每个元素，并使用 index 变量指定当前项的索引。在模板中，我们还使用了插值表达式 {{i + 1}} 来显示当前项在列表中的序号。
为了实现添加和删除待办事项的功能，我们还定义了一个 newItem 变量用于绑定输入框的值，并提供了一个 addItem 方法和一个 removeItem 方法来添加和删除待办事项。在模板中，我们使用 [(ngModel)] 指令来实现双向绑定，让输入框的值与 newItem 变量保持同步。
最后，为了提高列表的性能，我们使用了 trackByFn 函数来指定迭代器。由于待办事项的内容是字符串类型，所以我们直接返回该字符串作为标识符。这样，当列表项的内容发生变化时，Angular 就可以根据标识符来判断是否需要重新渲染该列表项，从而提高性能。
总结
本文介绍了 ngFor 指令的基本用法和高级用法，并提供了示例代码来帮助读者更好地理解和掌握这一技术。在实际开发中，我们经常需要使用 ngFor 指令来循环渲染列表，因此掌握 ngFor 指令的使用方法非常重要。希望本文能够帮助读者更好地理解和掌握 ngFor 指令，从而提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6513389595b1f8cacdbab09f