Angular ngFor指令及其使用方法

在 Angular 中，ngFor 指令用于显示一个数组数据集合的模板内容，并重复渲染模板直到可迭代对象中的所有项都已经被处理。

使用 ngFor

ngFor 的写法如下：

<ul>
  <li *ngFor="let item of items; index as i">{{i}} - {{item.name}}</li>
</ul>

其中，*ngFor 是一个 Angular 指令，用于告诉 Angular，我们要迭代一个数据集合，并将它的每个元素渲染为模板中的特定结构。

let item of items 意思是从 items 中获取了一个 item 并进行迭代。

index as i 是可选的，它是一个给出循环的index的变量。

在上述的示例中，我们遍历了一个 items 数组并为每个 item 渲染一个包含其 name 属性的 li 元素。同时，我们也打印出 index 的值。

示例

import { Component } from '@angular/core';

interface Item {
  name: string;
}

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of items; index as i">{{i}} - {{item.name}}</li>
    </ul>
  `,
})
export class AppComponent {
  items: Item[] = [
    { name: 'Apple' },
    { name: 'Banana' },
    { name: 'Carrot' },
  ];
}

总结

ngFor 是 Angular 中用于遍历数组、对象等集合数据类型的重要指令，通过使用 ngFor，我们可以轻松地将可迭代对象中的元素渲染出来，并且可以使用 index 来输出每个元素的索引。以上就是使用 Angular ngFor 指令及其使用方法的介绍。