Angular 中的 ngfor 指令：使用示例

在 Angular 中，ngFor 是一个非常重要的指令，用于遍历数组或对象，并根据其中的元素创建相应的 DOM 元素。本文将详细介绍 ngFor 的使用方法，并提供相应的示例代码，方便大家学习和使用。

ngFor 的基本用法

ngFor 的基本用法是通过 *ngFor 指令加上一个 let 关键字进行声明，然后在 ngFor 之后的方括号中指定需要遍历的数组或对象。示例如下：

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

上面的代码用来遍历名为 items 的数组，并创建一个包含数组元素的 li 元素列表。let 可以替换为其他关键字，如 index 或者 even/odd 等，分别对应该元素在数组中的索引和循环次数等。

遍历对象

ngFor 还支持遍历对象，此时使用类似于 *ngFor="let item of items" 的语法是不够的，我们需要使用一个特定的语法，如下所示：

<div *ngFor="let key of keys">{{ key }}: {{ data[key] }}</div>

上面的代码用来遍历名为 data 的对象，获取其中的键和值，并创建一个包含键值对的 div 元素列表。

内嵌模板

上面介绍的示例都是比较简单的情况，但 ngFor 提供了更为强大的内嵌模板，让我们可以更方便地定制需要创建的 DOM 元素。具体来说，我们可以在 ngFor 的指令中添加一个 let 关键字以及一个 of 关键字，并在 let 后面指定一个临时变量，用于引用当前遍历到的元素，然后在 of 后面指定一个数组或对象，最后把需要创建的 DOM 元素包裹在一个 ng-template 标签中即可。

<ng-container *ngFor="let item of items; index as i">
  <ng-template let-item>
    <div>{{ i }} - {{ item }}</div>
  </ng-template>
</ng-container>

上面的代码通过使用 ng-template 标签和 let 关键字，自定义了需要创建的 div 元素，并通过 index as i 的语法，获取当前元素在数组中的索引。

对 ngFor 进行过滤和排序

ngFor 还支持对数组进行过滤和排序，可以通过使用 Angular 中的管道（pipe）来实现。以 filter 管道为例，如下所示：

<ul>
  <li *ngFor="let item of items | filter: 'A'">{{ item }}</li>
</ul>

上面的代码使用了 filter 管道，只会显示数组中以字母 A 开头的元素。与此类似，排序管道 sort 也可以按照指定规则对数组元素进行排序。

总结

本文介绍了 Angular 中的 ngFor 指令的基本用法和进阶使用方法，包括遍历数组、遍历对象、使用内嵌模板以及进行过滤和排序等。这些知识点对于 Angular 的开发者来说都是必须掌握的基础知识，希望本文可以帮助到大家。如果还有疑问，可以在评论区留言，我们会与您一起探讨。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6549883f7d4982a6eb3b9c13