用nz-tabel寫一個合并表格
<nz-table #basicTable [nzData]="tableSearchStatus.dataList" nzBordered><thead><tr><th>班級</th><th>姓名</th><th>年齡</th><th>電話</th></tr></thead><tbody><!-- 使用 ng-container 進行循環 --><ng-container *ngFor="let classItem of basicTable.data; let i = index"><!-- 第一行:班級名稱和第一個學生的詳細信息 --><tr *ngIf="classItem.students.length > 0"><td [attr.rowspan]="classItem.students.length">{{ classItem.className }}</td><td>{{ classItem.students[0].name }}</td><td>{{ classItem.students[0].age }}</td><td>{{ classItem.students[0].phone }}</td></tr><!-- 后續行:其余學生的詳細信息 --><tr *ngFor="let student of classItem.students.slice(1)"><td>{{ student.name }}</td><td>{{ student.age }}</td><td>{{ student.phone }}</td></tr><!-- 如果沒有學生,則單獨一行顯示班級信息 --><tr *ngIf="classItem.students.length === 0"><td>{{ classItem.className }}</td><!-- 也可以不合并 在追加兩個td --><td colspan="3">無學生信息</td></tr></ng-container></tbody></nz-table>
tableSearchStatus.dataList = [{className: "301班",students: [{ name: "aa1", age: 11, phone: "1231231222" },{ name: "aa2", age: 11, phone: "1231231233" },{ name: "aa3", age: 11, phone: "12312312333" },{ name: "aa4", age: 11, phone: "1231231233333" },{ name: "aa5", age: 11, phone: "123123122222" },],},{className: "12班",students: [{ name: "aa1", age: 11, phone: "12312312" },{ name: "aa2", age: 11, phone: "12312312" },],},{className: "322班",students: [{ name: "aa", age: 11, phone: "12312312" },{ name: "aa", age: 11, phone: "12312312" },],},{className: "3111班",students: [],},{className: "233班",students: [{ name: "aa", age: 11, phone: "12312312" },{ name: "aa", age: 11, phone: "12312312" },],},];
<table border="1"><thead><tr><th>班級</th><th>姓名</th><th>年齡</th><th>電話</th></tr></thead><tbody><ng-container *ngFor="let classItem of tableSearchStatus.dataList"><tr *ngIf="classItem.students.length > 0; else noStudentsTemplate"><td [attr.rowspan]="classItem.students.length">{{ classItem.className }}</td><td>{{ classItem.students[0].name }}</td><td>{{ classItem.students[0].age }}</td><td>{{ classItem.students[0].phone }}</td></tr><tr *ngFor="let student of classItem.students.slice(1)"><td>{{ student.name }}</td><td>{{ student.age }}</td><td>{{ student.phone }}</td></tr><ng-template #noStudentsTemplate><tr><td>{{ classItem.className }}</td><td colspan="3">無學生信息</td></tr></ng-template></ng-container></tbody></table>