ngFor 的语法 - Html

介绍

ngFor是Angular中的一种结构性指令，用于循环遍历数组或对象，并绑定数据到模板中。ngFor的语法看起来类似于for循环遍历，但它提供了更灵活和简单的功能。

语法

基本语法：

<ng-container *ngFor="let item of items">
    <!-- 模板内容 -->
</ng-container>

此处，*ngFor是指令，let item是将数组或对象中的每个元素赋值给一个名为item的变量。items是要循环遍历的数组或对象。

你还可以使用index来引用当前的索引：

<ng-container *ngFor="let item of items; index as i">
    <!-- 模板内容，可以使用 {{i}} 来获取当前元素的索引 -->
</ng-container>

活用场景

ngFor的活用场景很多，比如你可以循环遍历数据并创建列表元素：

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

你还可以循环遍历对象的属性：

<ul>
  <li *ngFor="let key of Object.keys(myObject)">
    {{key}}: {{myObject[key]}}
  </li>
</ul>

以上例子可以遍历一个对象的所有属性并显示出来。

另一个常见用法是在循环中使用条件语句，例如：

<ul>
  <li *ngFor="let item of items">
    <span *ngIf="item.isBold">{{item.text | uppercase}}</span>
    <span *ngIf="!item.isBold">{{item.text}}</span>
  </li>
</ul>

这将遍历一个包含文本和是否粗体的item数组，并在需要时应用条件格式。

总结

ngFor是Angular的一个强大且简单易用的指令，它可以快速地循环遍历数组或对象，并将数据绑定到模板中。我们对ngFor的语法进行了详细介绍，并提供了一些常见的例子。现在你可以开始使用ngFor来处理你的数据循环遍历需求了！