如何使用角度材料表添加多个标题行

Posted 2023-02-19

【中文标题】如何使用角度材料表添加多个标题行

【英文标题】：How to add mutiple header rows using angular material table

【发布时间】：2019-11-05 13:04:07

【问题描述】：

参数一：时间段 元素.值 参数 2：性别 元素.性别

<ng-container matColumnDef="column3">
  <mat-header-cell *matHeaderCellDef rowspan="2"> Patients with Base Condition </mat-header-cell>
  <mat-cell *matCellDef="let element"> element.value </mat-cell>
</ng-container>

<ng-container matColumnDef="column4">
  <mat-header-cell *matHeaderCellDef> Patients with Outcome</mat-header-cell>
  <mat-cell *matCellDef="let element"> element.value </mat-cell>
</ng-container>

<ng-container matColumnDef="column5">
  <mat-header-cell *matHeaderCellDef class="ColumnDivider"> Prevelance </mat-header-cell>
  <mat-cell *matCellDef="let element" class="ColumnDivider"> element.value </mat-cell>
</ng-container>

<ng-container matColumnDef="column6">
  <mat-header-cell *matHeaderCellDef> Patients at Risk </mat-header-cell>
  <mat-cell *matCellDef="let element"> element.value </mat-cell>
</ng-container>

<ng-container matColumnDef="column7">
  <mat-header-cell *matHeaderCellDef> New Patients with Outcome </mat-header-cell>
  <mat-cell *matCellDef="let element"> element.value </mat-cell>
</ng-container>

<ng-container matColumnDef="column8">
  <mat-header-cell *matHeaderCellDef class="ColumnDivider"> Incidence Proportion </mat-header-cell>
  <mat-cell *matCellDef="let element" class="ColumnDivider"> element.value </mat-cell>
</ng-container>

<ng-container matColumnDef="column8">
  <mat-header-cell *matHeaderCellDef> Total Patient Years at Risk </mat-header-cell>
  <mat-cell *matCellDef="let element"> element.value </mat-cell>
</ng-container>

<ng-container matColumnDef="column10">
  <mat-header-cell *matHeaderCellDef class="myMarginLeft"> New Patients with Outcome </mat-header-cell>
  <mat-cell *matCellDef="let element" class="myMarginLeft"> element.value </mat-cell>
</ng-container>

<ng-container matColumnDef="column11">
  <mat-header-cell *matHeaderCellDef >Incidence Rate </mat-header-cell>
  <mat-cell *matCellDef="let element"> element.value </mat-cell>
</ng-container>

<ng-container *matHeaderRowDef="displayedColumns">
  <div class="mat-header-row header-group-row">
    <div class="mat-header-cell" role="columnheader"></div>
    <div class="mat-header-cell" role="columnheader"></div>
  </div>
  <mat-header-row></mat-header-row>
</ng-container>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)" [ngClass]="'highlight': selectedRowIndex == row.inp_analysis_name"></mat-row>

多列与一列。

column1|column2|Column3|Column4|Column5|Column6|Column7|Column8 Column2.1|Column2.2|Column2.3 Column6.1|Column6.2

【问题讨论】：

here 你可以找到具有多个标题的 mat-table 的官方示例。

由于我使用的是 Angular 5，因此无法使用上述解决方案。

【参考方案1】：

使用 colspan 重新创建多个标题行和单元格分组的示例。

https://stackblitz.com/edit/angular-bklajw?file=app%2Ftable-basic-example.html

【讨论】：

我们如何才能再次在第二组中进行分组？像第三组有重量和符号，而第四组有一些其他参数，比如身高？

我在 Angular 11 中收到 [style.text-align]="center" not found 错误。