在表格中显示具有动态列数的数组

Question

假设我从服务器获取了一个数组。  var arr = [            { ID: "001", Name: "a00",  isChecked: "true" },            { ID: "002", Name: "b00",  isChecked: "true" },             { ID: "003", Name: "c00",  isChecked: "true" },            { ID: "004", Name: "d00",  isChecked: "true" },            { ID: "005", Name: "e00",  isChecked: "true" },            { ID: "006", Name: "f00",  isChecked: "true" },             { ID: "007", Name: "g00",  isChecked: "true" },            { ID: "008", Name: "h00",  isChecked: "true" },             { ID: "009", Name: "i00",  isChecked: "true" },            { ID: "010", Name: "j00",  isChecked: "true" },             { ID: "011", Name: "k00",  isChecked: "true" },            { ID: "012", Name: "l00",  isChecked: "true" },            { ID: "013", Name: "m00",  isChecked: "true" },            { ID: "014", Name: "n00",  isChecked: "true" },             { ID: "015", Name: "o00",  isChecked: "true" },            { ID: "016", Name: "p00",  isChecked: "true" },              // ....many many rows        ]现在我想将其显示在具有一定列数的表格中。例如，如果我想将其显示为 4 列。然后我用 <tbody>    <tr *ngFor="let group of arr">      <td>{{group.name}}</td>      <td>{{group.name}}</td>      <td>{{group.name}}</td>      <td>{{group.name}}</td>   </tr>预期的结果喜欢a00 | b00 | c00 | d00e00 | f00 | g00 | h00.....如果我选择7列。那么代码是：<tbody>    <tr *ngFor="let group of arr">        <td>{{group.name}}</td>        <td>{{group.name}}</td>        <td>{{group.name}}</td>        <td>{{group.name}}</td>        <td>{{group.name}}</td>        <td>{{group.name}}</td>        <td>{{group.name}}</td></tr>预期结果如下：a00 | b00 | c00 | d00 | e00 | f00 | g00.... 但是我不知道它是 4 还是 7，块大小由变量给出size。那么该怎么做呢？

Answer 1

您可以使用以下方法来执行此操作：

1. 根据大小变量将数组转换为二维数组。

2. 现在在模板中迭代该数组。

.ts

newArr = []

size = 2;    // change this as per your requirement

ngOnInit() {

  while (this.arr.length) { 

    this.newArr.push(this.arr.splice(0, this.size)); // create 2D array

  }

}

.html

<table>

    <tbody>

        <tr *ngFor="let outer of newArr">

            <td *ngFor="let group of outer">{{group.Name}}</td>

        </tr>

    </tbody>

</table>

工作堆栈闪电战

Answer 2

基于size变量，您可以创建一个长度为 size 的数组，并使用另一个*ngFor包含该数组的数组来渲染列。

例子

成分

class MyComponent extend OnInit {

   size = 4;

   sizeArray = [];

   ngOnInit() {

     this.sizeArray = new Array(this.size)

   }

}

模板

<tbody>

  <tr *ngFor="let group of arr">

    <td *ngFor="let index of sizeArray">

      {{group.name}}

    </td>

  </tr>

</tbody>