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

5sxhfpxr  于 12个月前  发布在  Angular
关注(0)|答案(1)|浏览(111)

我有一个对象数组,所以我做了一个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只显示一次,并且它跨越所有行。

<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的链接,

相关问题