角度材料垫表将标题动态分成组

Question

我有动态呈现数据的角垫表。现在，我想拆分标题并按类别显示列

这是下面的代码，我通过它来渲染 mat-table，现在我想转换它。任何帮助，将不胜感激。 :)

<div *ngIf="showTable">

  <mat-table [dataSource]="dataSource" matSort>
    <ng-container *ngFor="let column of tColumns; let i = index" [matColumnDef]="column.name">

      <mat-header-cell [id]="'cdk-column'+[column.name |removewhitespaces]" [matTooltip]="column.name.length > 20 ? column.name  : '' " *matHeaderCellDef [innerHTML]="column.name | ellipsis :column.elipsesAfter">
      </mat-header-cell>
      <ng-template [ngIf]="isTextControlApplicable(column)" [ngIfElse]="noTextControl">
        <mat-cell [matTooltip]="getTooltipText(element,column)" (click)="cellClicked(column, element[column.name])" *matCellDef="let element"
                  [ngClass]="getCellClasses(column)" [innerHTML]="(element[column.name]) | ellipsis :column.elipsesAfter"></mat-cell>
      </ng-template>
      <ng-template #noTextControl>
        <mat-cell *matCellDef="let element" (click)="cellClicked(column, element[column.name])" [ngClass]="getCellClasses(column)"
                  [innerHTML]="element[column.name]"></mat-cell>
      </ng-template>

    </ng-container>
    <mat-header-row id="tbRow" *matHeaderRowDef="columnNames"></mat-header-row>
    <mat-row *matRowDef="let row; columns: columnNames;"></mat-row>
  </mat-table>
</div>

输出

    |---------------------------------------------------------------------------------------------
    | Name         |                   UPTT...            |            DPTT..       |   APTT..   |
    |              | -----------------------------------------------------------------------------
    |              | U1A_Shift SCM | U3B SCM   | U1B SCM  | U1A_Shift SCM | U1B SCM |  U3B SCM   |
    |---------------------------------------------------------------------------------------------
    | U3B          |  -            | 3413.00   |  -       |   -          |    -     | 3510.00    |
    | U1B          |  -            |     3     |  1044.00 |   -          |  631.00  |   -        |
    | U1A_Shift    |  321.00       |     3     |  -       |   1909.00    |    -     |   -        |
    |--------------------------------------------------------------------------------------------|


This is the tableOfObjects

[
    {
        "Severity": "<span class='tableActive'></span>",
        "Name": "U3B",
        "U1A_Shift SCM: UPTT-Pressure (Bara)": "-",
        "U1A_Shift SCM: DPTT-Pressure (Bara)": "-",
        "U3B SCM: APTT-Pressure (Bara)": "3510.00",
        "U3B SCM: UPTT-Pressure (Bara)": "3413.00",
        "U1B SCM: DPTT-Pressure (Bara)": "-",
        "U1B SCM: UPTT-Pressure (Bara)": "-",
        "U3B SCM: DPTT-Pressure (Bara)": "740.00",
        "U1A_Shift SCM: UPTT-Temp (DegC)": "-",
        "U1A_Shift SCM: DPTT-Temp (DegC)": "-",
        "U3B SCM: APTT-Temp (DegC)": "1565.00",
        "U3B SCM: UPTT-Temp (DegC)": "2654.00",
        "U1B SCM: DPTT-Temp (DegC)": "-",
        "U1B SCM: UPTT-Temp (DegC)": "-",
        "U3B SCM: DPTT-Temp (DegC)": "3159.00",
        "U1B SCM: PCV-CHOKE status - Control position": "-",
        "U3B SCM: PCV-CHOKE status - Control position": "-",
        "U1A_Shift SCM: PCV-CHOKE status - Control position": "-",
        "Alarms": 0,
        "Advisories": 0,
        "__row_index": 0
    },
    {
        "Severity": "<span class='tableActive'></span>",
        "Name": "U1B",
        "U1A_Shift SCM: UPTT-Pressure (Bara)": "-",
        "U1A_Shift SCM: DPTT-Pressure (Bara)": "-",
        "U3B SCM: APTT-Pressure (Bara)": "-",
        "U3B SCM: UPTT-Pressure (Bara)": "-",
        "U1B SCM: DPTT-Pressure (Bara)": "631.00",
        "U1B SCM: UPTT-Pressure (Bara)": "1044.00",
        "U3B SCM: DPTT-Pressure (Bara)": "-",
        "U1A_Shift SCM: UPTT-Temp (DegC)": "-",
        "U1A_Shift SCM: DPTT-Temp (DegC)": "-",
        "U3B SCM: APTT-Temp (DegC)": "-",
        "U3B SCM: UPTT-Temp (DegC)": "-",
        "U1B SCM: DPTT-Temp (DegC)": "2895.00",
        "U1B SCM: UPTT-Temp (DegC)": "3346.00",
        "U3B SCM: DPTT-Temp (DegC)": "-",
        "U1B SCM: PCV-CHOKE status - Control position": "-",
        "U3B SCM: PCV-CHOKE status - Control position": "-",
        "U1A_Shift SCM: PCV-CHOKE status - Control position": "-",
        "Alarms": 0,
        "Advisories": 0,
        "__row_index": 1
    },
    {
        "Severity": "<span class='tableActive'></span>",
        "Name": "U1A_Shift",
        "U1A_Shift SCM: UPTT-Pressure (Bara)": "321.00",
        "U1A_Shift SCM: DPTT-Pressure (Bara)": "1909.00",
        "U3B SCM: APTT-Pressure (Bara)": "-",
        "U3B SCM: UPTT-Pressure (Bara)": "-",
        "U1B SCM: DPTT-Pressure (Bara)": "-",
        "U1B SCM: UPTT-Pressure (Bara)": "-",
        "U3B SCM: DPTT-Pressure (Bara)": "-",
        "U1A_Shift SCM: UPTT-Temp (DegC)": "3031.00",
        "U1A_Shift SCM: DPTT-Temp (DegC)": "2234.00",
        "U3B SCM: APTT-Temp (DegC)": "-",
        "U3B SCM: UPTT-Temp (DegC)": "-",
        "U1B SCM: DPTT-Temp (DegC)": "-",
        "U1B SCM: UPTT-Temp (DegC)": "-",
        "U3B SCM: DPTT-Temp (DegC)": "-",
        "U1B SCM: PCV-CHOKE status - Control position": "-",
        "U3B SCM: PCV-CHOKE status - Control position": "-",
        "U1A_Shift SCM: PCV-CHOKE status - Control position": "-",
        "Alarms": 0,
        "Advisories": 0,
        "__row_index": 2
    }
]

 this.tableOfObjects = this.getTableOfObjects(columns, rows);
 this.dataSource = new MatTableDataSource(this.tableOfObjects);

ffewfgewfewgregregreghergregreghtrht56547657t35