angular - (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 都可以。
我相信这里的主要问题（以及为什么我在网上找不到合适的答案）是因为我不知道数组的大小，所以这个表的大小是可变的，对于每个，它会在它填充新单元格时仍然遵循结构。

标签： angularhtmlbootstrap-4

Answer 1

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

Angular 2 ngFor 超过偶数/奇数项目

然后在您的 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>