Angular 生成具有可迭代部分的表，该表具有 rowspan 属性

Question

我想制作一个包含一些可重复部分的表格。

我想要实现的是迭代一些数据，每个部分都有四个确切的项目。 下面是一个基本视图 - 它涵盖了一个对象（热量）

我正在努力实现的目标 是合并单元格，如下图所示 但是，当我使用 rowspsan 属性时，表格很奇怪...

stackblitz 上的工作示例：

https://stackblitz.com/edit/angular-iterable-table-rowspan-attribute

Answer 1

试试这样的。

        <ng-container *ngFor="let data of dataExample">
            <tr *ngFor="let element of data.data;  let i = index">
                <td *ngIf="i%2 === 0" rowspan=2></td>
                <td>{{element.track}}</td>
                <td>{{element.number}}</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td *ngIf="i%2 === 0" rowspan=2></td>
                <td *ngIf="i%2 === 0" rowspan=2></td>
            </tr>
        </ng-container>

*ngFor 防止创建过多的单元格。每对行都需要一个。