（角度）使用* ngFor填充表格

Question

我需要一个像这样的表结构：

为此，我使用基本的Bootstrap表和Angular的@ViewChild('next') nextBtn: any; checkTrue(){ if(conition === true){ this.nextBtn.blur(); } } 。每个表单元格由来自后端数组的不同名称填充。
这就是我的做法：

*ngFor

该结构运行良好，但单元格未按我的意愿填充。每行都用<table class="table"> <tbody> <tr *ngFor="let data of User;" class={{data.nome}} id='Check_{{data.id}}' (click)='toggleCheckbox($event.target)'> <td>{{data.nome}}</td> <td>{{data.nome}}</td> </tr> </tbody> </table> 的名称填充，如下所示：

并且我知道发生这种情况是因为ngFor在行更改后循环，而不是针对每个新单元格。问题是我无法正确填写表格，如果这样做，也无法保持表格的结构完整。
是否有更好的方法来实现这一目标？使用Bootstrap或HTML5都可以。
我相信这里的主要问题（以及为什么不能在线找到合适的答案）是因为我不知道数组的大小，所以此表的大小是可变的，对于每个表，它都会填充新单元格，但它仍然遵循该结构。

Answer 1

您可以创建答案中给出的奇偶过滤器

Angular 2 ngFor over even/odd items

，然后像下面一样在您的html中使用

<table class="table">
    <tbody>
<ng-container *ngFor="let data of User | evenodd:'odd'">
      <tr class={{data.nome}} id='Check_{{data.id}}'
        (click)='toggleCheckbox($event.target)'>
        <td>{{data.nome}}</td>
      </tr>
</ng-container>
<ng-container *ngFor="let data of User | evenodd:'even'">
    <tr class={{data.nome}} id='Check_{{data.id}}'
        (click)='toggleCheckbox($event.target)'>
        <td>{{data.nome}}</td>
      </tr>
</ng-container>
    </tbody>
</table>