在 Angular + Bootstrap 中动态创建行和列

Question

我想在角度模板中动态创建行，并且每一行都固定为 4 列。例如。如果我的输入是 40，结果必须有 10 行，每行包含 4 列。我正在使用引导程序作为模板。这是我已经走了多远但没有工作。

<div class="row" *ngFor="let r of row">
  <div class="col-3" *ngFor="let i of id">{{i}}</div>
</div>

.ts 代码：

id: number = 40;
row: number = id / 4;

如何实现结果。问题与矩阵相同，但在模板中如何实现。

Answer 1

试试下面的

  id: number = 40;
  row: number = Math.ceil(this.id / 4);
  row1 = Array(this.row).fill(1);
  id1 = Array(4).fill(0).map((_, index) => index + 1);
  row2 = Array(this.id).fill(1).map((_, index) => index + 1);

constructor() {
    var chunk_size = 4;
    var arr = this.row2;
    var groups = arr.map(function (e, i) {
      return i % chunk_size === 0 ? arr.slice(i, i + chunk_size) : null;
    })
      .filter(function (e) { return e; });
    this.matrix = groups;
  }

<div class="row" *ngFor="let r of row1;let i =index">
  <div class="col-3" *ngFor="let i of matrix[i]">{{i}}</div>
</div>

例如：https://stackblitz.com/edit/dynamic-row