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>

有可能按角度进行吗？还是应该在component中创建一些数组？

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，因为您有特定的访问密钥，但仍然:)）

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

1 个答案: