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