Angular 中的 ngFor 指令

NgFor 是一个内置的模板指令，它可以轻松地遍历数组或对象，并为每个条目创建一个模板。

以下是其基本用法示例：

<ul>
  <li *ngFor="let user of users">{{ user.name }}</li>
</ul>

这将输出类似以下的 HTML：

<ul>
  <li>Al Dente</li>
  <li>D. Liver</li>
  <li>Pepe Roni</li>
</ul>

• let user 创建一个在模板中可用的局部变量。
• of users 表示我们将遍历应该在组件中提供的 users 可迭代对象。
• ngFor 前面的 * 字符创建了一个父模板。这是以下语法的快捷方式：template=“ngFor let item of items”。

可用的局部变量

您还可以为以下导出值设置局部变量：index、first、last、even 和 odd。index 将返回当前循环索引，而其他值将提供一个布尔值，指示该值是 true 还是 false。例如：

<ul>
  <li *ngFor="let user of users; let i = index; let odd = odd"
      [class.odd]="odd">
    {{i + 1}}. {{ user.name }}
  </li>
</ul>

将生成以下标记：

<ul>
  <li>1. Al Dente</li>
  <li class="odd">2. D. Liver</li>
  <li>3. Pepe Roni</li>
</ul>

另请参阅

• *ngIf
• ngSwitch