我有一个对象数组,所以我做了一个ng for来显示数组中的各个对象,但我试图实现的是,最后一列不应该是ng的一部分,对于行重复,相反,最后一个学生列应该只有一行,整个表和文本是居中的列。例如:
https://stackblitz.com/edit/angular-nested-ngfor-in-table-p1wyas?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fhello.component.ts
nom7f22z1#
你可以使用rowspan属性和*ngIf来实现这一点。下面是一个可以实现这一点的代码示例。你所要做的就是确保最后一列td只显示一次,并且它跨越所有行。
rowspan
*ngIf
td
<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 demo的链接,
1条答案
按热度按时间nom7f22z1#
你可以使用
rowspan
属性和*ngIf
来实现这一点。下面是一个可以实现这一点的代码示例。你所要做的就是确保最后一列td
只显示一次,并且它跨越所有行。字符串
下面是stackblitz demo的链接,