在 Angular 中，我们常常需要对一组数据进行循环显示。而 ngFor 指令可以让我们更加简便地完成这个任务。
本篇文章将详细介绍 Angular 中如何使用 ngFor 进行循环，并通过示例代码演示其用法，以帮助读者深入了解该指令。
基本用法
首先，我们需要在模板（template）中使用 ngFor 指令。它的基本语法如下：
<element *ngFor="let item of items">{{ item }}</element>其中，items 是一个数组或一个可迭代对象，它可以是一个成员变量、一个方法的返回值或一个 HTTP 请求的响应数据。
这个语法使用了 Angular 的模板语法糖（template syntax sugar）。使用 *ngFor 相当于：
<ng-template ngFor let-item [ngForOf]="items">
<element>{{ item }}</element>
</ng-template>第一个行内样式定义的语法会被转换成第二个 ngFor 的格式，因为 ngFor 指令实际上是一个 Angular 内置的指令，它需要用 <ng-template> 来包裹其内部的结构。
在这个简单的例子中，ngFor 循环遍历了 items 数组，并将其每一个元素渲染为一个 <element>，同时将 item 变量导入了这个循环体内，可以在循环体中使用它来引用当前元素。输出的效果如下：
<element>item1</element> <element>item2</element> <element>item3</element> ...
带有索引的循环
有时候我们需要在循环体内使用当前元素的索引，例如用于建立一个可索引列表或用于根据索引在数组中操作元素。我们可以通过下面这个语法来获得将 ngFor 循环应用到我们的数组上的索引：
<element *ngFor="let item of items; let i = index">{{ i }}: {{ item }}</element>这里，我们使用了 Angular 中 ngFor 的另一种基本格式，它允许我们在 ngFor 指令的后面添加 ;，并且在后面再增加一个 let 语句定义一个额外的 index 变量。index 变量不需要手动定义，它是由 ngFor 隐式传递给循环体的。
当我们这样使用 ngFor 指令时，我们循环体内就可以使用额外定义的 index 变量，来访问索引：
<element>0: item1</element> <element>1: item2</element> <element>2: item3</element> ...
带有条件的循环
当我们需要仅仅循环一些特定的数据时怎么办？我们可以使用 ngIf 条件判断指令，在每一个循环元素上进行判断。例如，仅循环数组中大于 10 的元素：
<element *ngFor="let item of items" *ngIf="item > 10">{{ item }}</element>在这个例子中，我们使用了 ngIf 指令来判断 *ngFor 循环体内的 item 是否大于 10。如果 item 大于 10，当前的循环元素就会被渲染到页面。
带有模板的循环
对于比较复杂的组件，我们可能需要在循环体内使用自定义的 HTML 模板，而不是简单的字符串列表。在这个场景下，我们可以利用 Angular 内置的 <ng-template> 元素创建一个内嵌模板，并将它放置到每个循环元素内：
<element *ngFor="let item of items">
<ng-template>
<complex-component [data]="item"></complex-component>
</ng-template>
</element>在这个例子中，我们使用了 ng-template 元素在循环体内部创建了一个内嵌的模板，并将一个自定义组件 <complex-component> 放到了它内部。
总结
在本文中，我们介绍了 Angular 中如何使用 ngFor 指令进行循环。我们讨论了基本循环、带有索引的循环、带有条件的循环，以及如何在循环体内使用自定义 HTML 模板。
了解和掌握 ngFor 的使用方法对于 Web 开发工程师而言是非常重要的。我们希望本篇文章能够帮助你学习和掌握 Angular 中 ngFor 指令的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664f0fc7d3423812e4fff757