如何动态填充表格列和行中的数据

Question

我从 api 获取字符串数组并需要在表中显示它们（word1、word2、word3 等）。我不知道具体会是多少。表中的列数应为 5，行数取决于此数组。

                    <tr>
                        <th><a href="#">Cell 1</a></th>
                        <th><a href="#">Cell 2</a></th>
                        <th><a href="#">Cell 3</a></th>
                        <th><a href="#">Cell 4</a></th>
                        <th><a href="#">Cell 5</a></th>
                    </tr>
                    <tr>
                        <th><a href="#">Cell 6</a></th>
                        <th><a href="#">Cell 7</a></th>
                        <th><a href="#">Cell 8</a></th>
                        <th><a href="#">Cell 9</a></th>
                        <th><a href="#">Cell 9</a></th>
                    </tr>

如果有 20 个项目 - 应该是 4 行。我不知道如何开始新行。 示例是按行填充，如下所示显示如何按行填充

  <tr *ngFor="let tablerows of data">
                      <td>
                      {{tablerows.row_id}}
                      </td>
                      <td>{{tablerows.number}}</td>
                      <td >{{tablerows.employee_name}}</td>
                      <td >{{tablerows.manager_name}}
                      </td>
                    </tr>

是否可以通过角度来做到这一点？或者也许我应该在组件中创建一些数组？

Answer 1

这可能很糟糕，但是因为以这种方式操作字符串数组而不是需要的对象数组也很糟糕，所以这里是：

在组件中，将您的数组拆分为长度为 5 的子数组并将它们推送到一个新数组中，如下所示：

ngOnInit(){
  for (var i = 1; i <= 25; i++) {
    this.foo.push(i);
 }

 for(let x=0; x<this.foo.length; i+5){
  this.bar.push(this.foo.splice(x,x+5));
 }

}

我使用了一个数值数组来显示。在 html 中，您现在可以忽略 foo 并且只在 bar 上工作，如下所示：

  <table style="border:1px solid">          
      <tr *ngFor="let qwe of bar" style="border:1px solid">
        <td *ngFor="let asd of qwe" style="border:1px solid"> {{asd}}</td>
      </tr>
  </table>

我知道这不完全是你的情况，但我认为你可以从这里计算出你的逻辑（我猜你可能无法在 s 上循环，因为你有特定的密钥可以访问，但仍然:) )