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

Question

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

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

public rounds: number = 5;

和 HTML

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

我希望 tr 重复 5 次或根据回合值重复多次。

Answer 1

在您的组件中，您可以定义一个数字数组 (ES6)，如下所述:

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

请参阅此链接了解数组创建:Tersest way to create an array of integers from 1..20 in JavaScript.

然后您可以使用 ngFor 迭代该数组:

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

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

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