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

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 | d00

e00 | 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

您可以使用以下方法来执行此操作：根据大小变量将数组转换为二维数组。现在在模板中迭代该数组。.tsnewArr = []size = 2;&nbsp; &nbsp; // change this as per your requirementngOnInit() {&nbsp; while (this.arr.length) {&nbsp;&nbsp; &nbsp; this.newArr.push(this.arr.splice(0, this.size)); // create 2D array&nbsp; }}.html<table>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; <tr *ngFor="let outer of newArr">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td *ngFor="let group of outer">{{group.Name}}</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody></table>工作堆栈闪电战

Answer 2

基于size变量，您可以创建一个长度为 size 的数组，并使用另一个*ngFor包含该数组的数组来渲染列。例子成分class MyComponent extend OnInit {&nbsp; &nbsp;size = 4;&nbsp; &nbsp;sizeArray = [];&nbsp; &nbsp;ngOnInit() {&nbsp; &nbsp; &nbsp;this.sizeArray = new Array(this.size)&nbsp; &nbsp;}}模板<tbody>&nbsp; <tr *ngFor="let group of arr">&nbsp; &nbsp; <td *ngFor="let index of sizeArray">&nbsp; &nbsp; &nbsp; {{group.name}}&nbsp; &nbsp; </td>&nbsp; </tr></tbody>