Как добавить несколько строк заголовка с помощью угловой таблицы материалов

Параметр 1: Период времени {{element.value}} Параметр 2: Пол {{element.gender}}

<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>

Multiple columns with a single column.

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


person v3nu    schedule 23.06.2019    source источник
comment
здесь вы можете найти официальный пример таблицы mat с несколькими заголовками.   -  person ysf    schedule 23.06.2019
comment
Поскольку я использую angular 5, он не работает с использованием вышеупомянутого решения.   -  person v3nu    schedule 24.06.2019


Ответы (1)


Пример воссоздания нескольких строк заголовков и группировки ячеек с помощью colspan.

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

введите описание изображения здесь

person rrr    schedule 27.10.2020
comment
Как мы можем снова подгруппироваться во второй группе? Как третья группа, у которой есть вес и символ, в то время как четвертая группа имеет другой параметр, например рост? - person app; 10.12.2020
comment
Я получил [style.text-align]="center" ошибку не найдено в Angular 11. - person Bigeyes; 22.06.2021