更改角材料表字体颜色答案

【问题标题】：Change angular material table font color更改角材料表字体颜色
【发布时间】：2018-05-11 19:14:57
【问题描述】：

我有一个角度材料设计表组件，我无法更改选定行的字体颜色。

这是我的 HTML 模板的一部分：

<mat-table #table [dataSource]="dataSource" matSort flex layout="row" layout-fill>

    <ng-container matColumnDef="segmentName">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Segment </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.segmentName}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="bestRider">
      <mat-header-cell *matHeaderCellDef mat-sort-header> KOM </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.bestRider}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

    <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="setSelectedRow(row)" [ngClass]="{'highlight': selectedRowIndex == row.id}"></mat-row>
</mat-table>

还有一部分css：

.highlight{
  color: white;
  background: #673AB7;
}

如果我单击一行，“突出显示”样式的背景颜色会正确应用，但字体颜色始终为黑色。有人可以帮助我吗？谢谢！！

【问题讨论】：

这不是问题，您也可以在 mat-cell 上应用相同的内容。 plnkr.co/edit/llObvMVOfFGKsus731Cx?p=info

标签： css angular material-design

【解决方案1】：

你必须覆盖 mat-cell 的颜色：

.mat-cell {
    color: white;
}

或者也将 css 类 'highlight' 应用到 mat-cell：

<ng-container matColumnDef="bestRider">
      <mat-header-cell *matHeaderCellDef mat-sort-header> KOM </mat-header-cell>
      <mat-cell *matCellDef="let element; row" [ngClass]="{'highlight': selectedRowIndex == row.id}"> {{element.bestRider}} </mat-cell>
    </ng-container>

【讨论】：

【解决方案2】：

好的，找到了！我错过了“matCellDef”中的“行”：

  <mat-cell *matCellDef="let row; let element" [ngClass]="{'highlight': selectedRowIndex == row.id}"> {{element.bestRider}} </mat-cell>

非常感谢！！！

【讨论】：