Question

在Angular 2+中使用* ngFor需要通过创建n个元素的数组来构建可迭代（行）：

<table>
  <tr *ngFor="let row of rows">

  </tr>
</table>

有一种迭代数字的方法吗？提前谢谢。

Answer 1

您可以使用组件类的方法生成行索引数组：

public generateRowIndexes(count: number): Array<number> {
  let indexes = [];
  for (let i = 0; i < count; i++) {
    this.indexes.push(i);
  }
  return indexes;
}

并在模板中调用它：

<table>
  <tr *ngFor="let rowIndex of generateRowIndexes(5)">
    ...
  </tr>
</table>

可以在this stackblitz中测试代码。

Answer 2

我会使用这种语法将索引值设置为HTML元素的属性：

<table>
  <tr *ngFor="let item of items; let i = index" [attr.data-index]="i"> // data-index attribute will be assigned index 

  </tr>
</table>

Angular ngFor没有可迭代的。需要构建Iterable

2 个答案: