在Angular中動態材料表的列名中添加新行

Question

我有一個帶有動態列的材料表，目前看起來像 -

但我的預期輸出是這樣的 -

在 PIN GROUNDED = 1 之后我可以做什么來添加新行？ 我嘗試添加 BR 但這沒有用。

我生成動態列的代碼是 -

      <mat-table matSort [dataSource]="gridDataSource">
      <ng-container [matColumnDef]="col" *ngFor="let col of columnsToDisplay">
      <mat-header-cell mat-sort-header *matHeaderCellDef>
                  {{col | uppercase}}
      </mat-header-cell>
      <mat-cell *matCellDef="let element">
                  {{element[col]}}
      </mat-cell>
      </ng-container>
      <mat-header-row class="headerHeight" *matHeaderRowDef="columnsToDisplay"></mat-header-row>
      <mat-row *matRowDef="let row; columns: columnsToDisplay;"
      [ngClass]="row.SEQ % 4 == 0 ? 'rows' : 'row'"></mat-row>
      </mat-table>

Answer 1

通過一些研究，我得到了解決方案。

我們可以使用 [innerHtml] 屬性代替 {{colName}} 。 這使得
字符串中的標記反映為水平中斷線。

<span [innerHTML]= "col | uppercase"></span>