如何使用基于数字的 ngFor 多次重复 HTML 元素？

在处理列表或表格数据时，经常要使用 ngFor 指令将 HTML 元素重复多次。而对于基于数字的重复，可以使用 ngFor 的数字语法。

数字语法

数字语法可以将一个整数作为输入，并重复次数等于该整数的数量。如下所示：

<div *ngFor="let i of 5"></div>

上述代码将会渲染 5 个 div 元素。

使用数字语法重复 HTML 元素

我们可以利用数字语法，将一个 HTML 元素重复多次。

<div *ngFor="let i of 5">
  <span>Hello World</span>
</div>

上述代码将会重复渲染包含“Hello World”文本的 span 元素，一共渲染 5 次。

在列表中使用数字语法

我们同样可以将数字语法作为数组的长度，来定义一个重复的列表。

export class MyComponent {
  items: Array<string> = ['Item 1', 'Item 2', 'Item 3'];
}

<ul>
  <li *ngFor="let item of items; let i = index">
    {{ i + 1 }}. {{ item }}
  </li>
</ul>

上述代码将会渲染一个有序列表，每一项都包括该项的索引和相应的值。

总结

使用 ngFor 数字语法，我们可以方便地重复 HTML 元素，并在列表中定义重复次数。对于大量数据的情况，还可以考虑使用虚拟滚动视图等技术，优化性能。