NgFor显示表中的数据以及用户输入的列数

Question

我有一个接受数组输入的组件，可以说[1,2,3,4,5,6,7]和输入的列数。

如果用户输入3列，那么在UI上，我想在3列表中显示数据，如下所示。

1 2 3
4 5 6
7

如果用户输入4，则数据将显示如下

1 2 3 4
5 6 7

是否可以仅使用* ngfor而不使用打字稿代码来从数组中生成具有动态列数的表。

Answer 1

是的，可以，但是无效

apply()

最好创建一个函数

<div *ngFor="let rows of '1'.repeat(array.length).split('')
           .slice(0,1+array.length/count);let i=index">
   <span *ngFor="let element of array.slice(i*count,(i+1)*count)">
     {{element}}
   </span>
</div>

您可以使用like

  groupArray(array: any[], count: number) {
    const result: any = [];
    array.forEach((x, index) => {
      if (index % count == 0) 
          result.push([]);

      result[result.length - 1].push(x);
    });
    return result;
  }

然后使用两个* ngFor

进行迭代

this.groupArray([1, 2, 3, 4, 5, 6, 7, 8, 9],4)

stackblitz