时间戳

首页 > 解决方案 > 以动态列数在表格中显示数组

javascript - 以动态列数在表格中显示数组

问题描述

假设我从服务器获得了一个数组。

  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。那么该怎么做呢？

标签： javascripthtmlarraysangulartypescript

解决方案

您可以这样做：

  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>

工作堆栈闪电战

推荐阅读