(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>