（Angular）使用* ngFor来填充表格

Question

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

为此，我使用的是基本的Bootstrap表和Angular的*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>

结构工作正常，但细胞没有像我想要的那样填充。每行都填充same名称，如下所示：

并且我理解这是因为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>