使用 angular 4 在 html table 中重复只有四列的行

Question

例如。我有一个这样的数组 cids:Array=[{Id:1},{Id:2},{Id:3},{Id:4},{Id:5},{Id:6},{Id :7}--------等..]

我希望输出为：

1 2 3 4
5 6 7 8
9

在 angular 4

中使用 *ngFor

Answer 1

<span *ngFor="let cid of cids">
    {{cid.Id}}
    <br *ngIf="(cid.Id)%4==0" />
</span>

Answer 2

一种方法是将数组[] 转换为数组[][4]。然后你就可以使用一个嵌套的 ngFor（另一个 ngFor 中的 ngFor）

伪代码：

ngFor* {
   ngFor* {
      print value;
      insert a space;
   }
  Insert a return line;
}

Repeat row with only four columns in html table using angular 4