参数1:时间段 {{元素.值}} 参数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>
单列多列。
列 1|列 2|列 3|列 4|列 5|列 6|列 7|列 8 Column2.1|Column2.2|Column2.3 Column6.1|Column6.2
使用 colspan 重新创建多个标题行和单元格分组的示例。
https://stackblitz.com/edit/angular-bklajw?file=app%2Ftable-basic-example.html
官方解决方案对我来说没有用,因为我需要辅助标题行来跨越所有列(这样我可以使用内容投影来使用单独的组件)
我的解决方案是创建一个从 CdkHeaderRow 扩展的SecondaryHeaderComponent:
@Component({
selector: 'mat-secondary-header-row',
standalone: true,
template: `<ng-content></ng-content>`
})
export class SecondaryHeaderComponent extends CdkHeaderRow {}
然后可以像这样使用(例如在 mat-header-row 元素下面):
<mat-secondary-header-row *matHeaderRowDef="[]; sticky: true">
<p>2nd header row content!</p>
</mat-secondary-header-row>
我遇到的一个怪癖是表格内容在(粘性)辅助标题行下方仍然可见。