ngFor 对象 - Javascript

简介

ngFor 是 Angular 中常用指令之一，用于遍历容器中的数据并渲染 UI。在遍历过程中，ngFor 将循环遍历的每个元素作为参数传递给模板，可以通过模板语句访问它们。

使用

在模板中，需要在一个容器元素上使用 ngFor 指令，并将遍历的对象绑定到该指令的属性上。例如，下面的示例展示了如何在一个 div 元素上使用 ngFor 指令：

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

在上面的示例中，我们使用 *ngFor 指令遍历名为 items 的数组，并将其内容渲染为 div 元素。let item of items 部分定义了一个局部变量 item，它将在每次遍历时被赋值为遍历的当前元素。

语法

*ngFor 指令的语法如下：

<div *ngFor="let item of items; let i = index; trackBy: trackByFn">
  {{ item }}
</div>

其中 ngFor 是指令名，* 是结构型指令的前缀，let 关键字用于定义一个局部变量，item 是局部变量名，items 是要遍历的对象。

ngFor 还支持其他的指令选项：

• index：遍历时的当前索引。
• trackBy：用于提供一个自定义的追踪函数来标识每个已遍历的元素。

示例

下面是一个基本示例，展示了如何在一个列表中遍历一个数组：

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

假设 items 数组包含以下元素：

items = ['apple', 'banana', 'orange'];

那么该示例将生成以下 HTML 结构：

<ul>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

高级用法

ngFor 还有一些高级用法，可以使用 ngForTrackBy 指令对列表进行优化，从而提高性能。例如，以下示例使用 ngForTrackBy 指令定义了一个函数，用于将遍历的对象数组中的每个元素映射到其 id 属性：

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

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

itemTrackBy(index: number, item: any) {
  return item.id;
}

在上面的示例中，itemTrackBy 函数将遍历的元素映射到其 id 属性，并返回该 id 值。该函数将用作追踪函数，帮助 Angular 比较前后两个版本的列表并找出哪些元素被修改、添加或删除了。这可以帮助 Angular 优化列表的渲染过程，提高性能。

总结

ngFor 是 Angular 中常用指令之一，用于遍历容器中的数据并渲染 UI。在遍历过程中，ngFor 将循环遍历的每个元素作为参数传递给模板，可以通过模板语句访问它们。我们可以使用该指令的语法、选项和高级用法来优化列表的渲染过程，提高性能。