在 Angular 中，ngFor 是一个非常重要的指令，它可以帮助我们循环遍历数组或对象，并展示数据。在本文中，我们将详细介绍 ngFor 的使用方法，并提供一些实用的示例代码。
基本使用方法
ngFor 指令可以通过以下语法来使用：
<element *ngFor="let item of items"></element>
其中，items 是一个数组或对象，item 是循环遍历时的每一项。我们可以在 element 标签中使用 {{ item }} 来展示每一项的值。
以下是一个简单的示例：
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>这个示例将会循环遍历 items 数组，并在每个 li 元素中展示每一项的值。
指定索引
在循环遍历时，我们可以通过 ngForOf 语法来指定当前项的索引。具体语法如下：
<element *ngFor="let item of items; let i = index"></element>
其中，index 表示当前项的索引值。我们可以通过 {{ i }} 来展示索引值。
以下是一个示例：
<ul>
<li *ngFor="let item of items; let i = index">{{ i }}: {{ item }}</li>
</ul>这个示例将会在每个 li 元素中展示每一项的索引值和值。
按条件过滤
我们可以通过 ngForOf 指令的 filter 选项来按条件过滤数组中的元素。具体语法如下：
<element *ngFor="let item of items; let i = index; let even = even; let odd = odd; let first = first; let last = last; let isEven = even && !odd"></element>
其中，even 表示当前项的索引值是否为偶数，odd 表示当前项的索引值是否为奇数，first 表示当前项是否为第一项，last 表示当前项是否为最后一项，isEven 表示当前项的索引值是否为偶数且不为奇数。
以下是一个示例：
<ul>
<li *ngFor="let item of items; let even = even; let odd = odd; let first = first; let last = last; let isEven = even && !odd" [ngClass]="{ 'even': isEven, 'odd': !isEven }">
<span *ngIf="first">First: </span>{{ item }}
<span *ngIf="last">Last: </span>
<span *ngIf="even">Even: </span>
<span *ngIf="odd">Odd: </span>
</li>
</ul>这个示例将会在每个 li 元素中展示每一项的值，并根据条件展示一些额外的信息。
使用 ngForOf 指令
在 Angular 中，ngFor 指令通常是通过 ngForOf 指令来实现的。ngForOf 指令是一个内置的指令，可以用来遍历数组或对象，并展示数据。
以下是一个示例：
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>这个示例将会循环遍历 items 数组，并在每个 li 元素中展示每一项的值。
总结
在本文中，我们介绍了 Angular 中使用 ngFor 循环展示数据的方法及示例。我们了解了 ngFor 的基本使用方法，以及如何指定索引和按条件过滤数组中的元素。我们还了解了 ngForOf 指令的使用方法，并提供了一些实用的示例代码。希望这篇文章能够对你在 Angular 中使用 ngFor 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658838c8eb4cecbf2dd62738