css Angular 中动态材料表的列名中增加新行

5uzkadbs  于 2023-03-05  发布在  Angular
关注(0)|答案(2)|浏览(142)

我有一个动态列的材料表,现在看起来像-

但我的预期产出是这样的

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

o4tp2gmn1#

在您的[dataSource]中,您必须在需要换行符的地方添加一个\n。例如:

const datasource = { anyKey: "value with a \nline-break" }

并在您的html中添加CSS样式的HTML元素white-space: pre-line,例如:

<td mat-cell style="white-space: pre-line">{{element.value}}</td>
vsmadaxz

vsmadaxz2#

经过一番研究,我找到了解决办法。
我们可以使用[innerHtml]属性而不是{{colName}}。这会使
标记反射为水平分隔线。

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

相关问题