angular - 向 Angular Material Table 中的 MatCell 添加自定义多行 HTML 内容

Question

我想在表格单元格中添加不同样式的多行。不过，Angular Material 表似乎剥离了我的 HTML 代码。我怎样才能实现类似 Gitlab 中的内容其中一行/项目内的第一行(例如“管理员”)与第二行(例如电子邮件地址)的样式不同，如代码示例所示。

表格组件.html

<ng-container matColumnDef="name">
   <mat-header-cell *matHeaderCellDef>{{header}}</mat-header-cell>
   <mat-cell *matCellDef="let row">

      <!-- first approach -->
      <div class="firstline">{{row.firstline}}</div>
      <div class="secondline">{{row.secondline}}</div>

      <!-- second approach -->
      <multiline-component [firstline]="row.firstline" [secondline]="row.secondline"></multiline-component>

   </mat-cell>
</ng-container>

多行组件.html

<div class="firstline">{{firstline}}</div> // I want to be bold
<div class="secondline">{{secondline}}</div> // I want to be just regular

我尝试将 [innerHTML] 与 bypassSecurityTrustHtml()-Pipe 一起使用，以防止剥离失败。我还尝试使用具有 [firSTLine] 和 [secondline] 属性绑定(bind)的自定义组件。

Answer 1

当使用 mat-table、mat-row 和 mat-cell 指令作为标签而不是 html 表的属性时，tr、td 的布局是 flex，因此您需要相应地设置表格的样式。

由于 mat-cell 是“flex: row”，因此元素横向排列。

如果您将想要多行的内容包装在应该这样做的“div”中:

<mat-cell *matCellDef="let row">
  <div>
    <div class="firstline">{{row.firstline}}</div>
    <div class="secondline">{{row.secondline}}</div>
  </div>
</mat-cell>