html 我如何才能实现以下表格设计中的Angular

5sxhfpxr  于 2023-11-15  发布在  Angular
关注(0)|答案(1)|浏览(140)

我有一个对象数组,所以我做了一个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

nom7f22z

nom7f22z1#

你可以使用rowspan属性和*ngIf来实现这一点。下面是一个可以实现这一点的代码示例。你所要做的就是确保最后一列td只显示一次,并且它跨越所有行。

  1. <table class="table table-hover table-striped">
  2. <thead>
  3. <tr>
  4. <th>Discipline</th>
  5. <th>Course</th>
  6. <th>Classes</th>
  7. <th>Students</th>
  8. </tr>
  9. </thead>
  10. <tbody>
  11. <tr *ngFor="let course of disciplines; let ind = index">
  12. <td>{{ course.count }}</td>
  13. <td>{{ course.name }}</td>
  14. <td>{{ course.classes }}</td>
  15. <td *ngIf="ind == 0" [attr.rowspan]="disciplines.length">
  16. {{ course.students }}
  17. </td>
  18. </tr>
  19. </tbody>
  20. </table>

字符串
下面是stackblitz demo的链接,

展开查看全部

相关问题