提问人：hitesh 提问时间：11/8/2023 更新时间：11/8/2023 访问量：36
如何在angular中实现以下表格设计
How can I achieve the following table design in angular
问：
我有一个对象数组，所以我正在做一个 ng 来显示该数组中的单个对象。但我试图实现的是最后一列不应该是ngFor 行重复的一部分。相反，最后一个学生列应该只有一行来表示整个表格，并且文本在列中居中。
这样说：
答：
1赞
Manish
11/8/2023
#1
您可以使用属性和 来实现此目的。下面是一个可以做到这一点的代码示例。您所要做的就是确保最后一个列只显示一次，并且它跨越所有行。rowspan*ngIftd
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Discipline</th>
<th>Course</th>
<th>Classes</th>
<th>Students</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let course of disciplines; let ind = index">
<td>{{ course.count }}</td>
<td>{{ course.name }}</td>
<td>{{ course.classes }}</td>
<td *ngIf="ind == 0" [attr.rowspan]="disciplines.length">
{{ course.students }}
</td>
</tr>
</tbody>
</table>
这是 stackblitz 演示的链接
评论
0赞
hitesh
11/9/2023
这很有帮助，谢谢！
0赞
Manish
11/9/2023
@hitesh我很高兴这有帮助。如果它解决了您的问题，您将答案标记为已接受，以便其他人也可以从中受益。
评论