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

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

1 个答案: