使用 ngFor on 选项和 ul 选择

在Angular中，如果我们需要在页面上显示一组数据，通常会使用ngFor循环指令。而如果我们需要以列表的形式显示这组数据，可以使用ul标签，配合ngFor指令实现。

语法

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

以上是使用ngFor和ul标签来循环遍历items数组，并以列表的形式显示数据的基本语法。其中ngFor指令的*号表示这是一个结构型指令，类似于ngIf指令。

ngFor指令的格式为：

*ngFor="let item of items; index as i; trackBy: trackByFn"

其中：

• let item of items：表示遍历items数组中的元素。
• index as i：表示将数组中的索引赋值给变量i。
• trackBy: trackByFn：是一个可选的函数，用于提高ngFor指令的性能。

示例

<ul>
  <li *ngFor="let item of items; index as i; trackBy: trackByFn">
    {{i + 1}}. {{ item.name }} - {{ item.value }}
  </li>
</ul>

以上代码将遍历一个名为items的数组，并以列表的形式显示每个元素的name和value。此外，我们还使用了index as i来显示每个元素的序号，同时使用了trackBy: trackByFn提高了性能。

绑定数据

如果需要为每个列表项绑定数据，可以使用方括号[]语法：

<ul>
  <li *ngFor="let item of items">
    <a [href]="item.url">{{ item.name }}</a>
  </li>
</ul>

以上代码将items数组中每个元素的url绑定到列表项的href属性上，从而为列表项创建了链接。

总结

通过ngFor指令和ul标签，我们可以方便地将一个数组以列表的形式显示在页面上，并且可以轻松地为每个列表项绑定数据。希望这篇文章能帮助你更好地理解ngFor和ul标签的使用方法。