时间戳

首页 > 解决方案 > 使用数字而不是数组作为值重复 HTML 元素 n 次？

angular - 使用数字而不是数组作为值重复 HTML 元素 n 次？

问题描述

我正在尝试学习 Angular，并且我已经看到 ngFor 用于遍历数组，但我似乎找不到任何基于数字简单地重复 html 元素 n 次的东西。

所以如果我在组件的 TS 文件中

public rounds: number = 5;

和 HTML

<tr *ngFor=""></tr>

我希望 tr 根据轮数重复 5 次或多次。

标签： angular

解决方案

在您的组件中，您可以定义一个数字数组（ES6），如下所述：

export class SampleComponent {
  constructor() {
    this.numbers = Array(5).fill(0).map((x,i)=>i);
  }
}

有关数组创建，请参阅此链接：在 JavaScript 中从 1..20 创建整数数组的最简单方法。

然后你可以用 ngFor 遍历这个数组：

<tr *ngFor="let number of numbers">{{number}}</tr>

或者如果您不想在组件中定义数组，您可以使用：

<tr *ngFor="let number of [0,1,2,3,4]">{{number}}</tr>

推荐阅读