Ändern Sie Winkel-Werkstoff-Tabelle font color

Ich habe eine eckig-material-design table-Komponente und ich kann Sie nicht erreichen, ändern Sie die Schriftfarbe der markierten Zeile.

Hier ist ein Teil meiner HTML-Vorlage:

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

Und ein Teil der css:

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

Wenn ich auf eine Zeile klicken, wird die Hintergrundfarbe des "highlight" - Stil ist, richtig angewendet, aber die Schriftfarbe ist immer schwarz.
Könnte mir jemand helfen ?
Danke !!

Das ist nicht das Problem, Sie können das gleiche bei der mat-Zelle auch. plnkr.co/Bearbeiten/llObvMVOfFGKsus731Cx?p=info

InformationsquelleAutor valerossi46 | 2017-11-28

  1. 3

    Müssen Sie überschreiben die Farbe der Matte-Zelle:

    .mat-cell {
    color: white;
}

    oder auch die css-Klasse 'highlight' mat-Zelle: 

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

    InformationsquelleAutor mohit uprim

  2. 0

    OK gefunden!!!
    Ich vermisste "Zeile" in die "matCellDef": 

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

    Vielen Dank!!!

    InformationsquelleAutor valerossi46

Schreibe einen Kommentar