Füllen einer Zelle der Matte-Tabelle mit einer Farbe

Question

ich eine ziemlich grundlegende Säule in einem mat-table haben wie folgt:

<mat-table #table [dataSource]="dataSource" matSort> 

    <ng-container matColumnDef="zone"> 
     <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell> 
     <mat-cell *matCellDef="let item" [style.background-color]="'#' + item.zone.color"></mat-cell> 
    </ng-container> 

    ... 

</mat-table> 

mag ich würde zone Spalte Zellen mit einigen Farben von Reihe unterschiedlicher füllen zu Reihe (nicht die ganze Reihe, nur Zellen dieser spezifischen Spalte).

Alles, was ich bisher finden konnte, ist die ganze Reihe zu färben.

Die Zellen der zone Spalte werden an den folgenden HTML gerendert:

<mat-cell class="mat-cell cdk-column-zone mat-column-zone" role="gridcell" style="background-color: rgb(255, 182, 193);" _ngcontent-c8=""></mat-cell> 

Wir können sehen, dass background-color Stil Eigenschaft korrekt angewendet wurde, aber das Problem ist, dass die Zelle in der Höhe 0. weil die Zelle doesn ist Ich habe keinen Inhalt. Ich habe versucht, eine   innerhalb der Zelle zu setzen, aber es wird als ein dünner Stab mit oberen und unteren Rand angezeigt:

Und was ich will, ist die ganze Zelle einschließlich seiner Ränder zu färben.

Wie können wir einzelne Zellen in mat-table färben?

Answer 1

Wenn Sie auf dem Standard-CSS von Angular Material bereitgestellt betrachten, werden Sie feststellen, dass das mat-row Element eine Mindesthöhe von 48px hat.

Aber wenn man sich die mat-cell schauen, werden Sie feststellen, dass es nicht ein Minimum haben weder eine Standardhöhe gesetzt, ist sie auf das übergeordnete Element (die Zeile) Anzeige/Ausrichtungseigenschaften bleiben zentriert .

Wenn Sie auf dem vorherigen Bild sehen es zeigt genau den Bereich, der von der Hintergrundfarbe Eigenschaft in Ihrem Code gefärbt wird.

So die Hintergrundfarbe für die gesamte Zelle zu ändern, eine der Optionen wäre die gleiche Mindesthöhe durch die Zeilen zu den Zellen verwendet zu setzen, die mit der folgenden CSS Erklärung getan werden könnten:

.mat-cell, .mat-header-cell { 
    flex: 1; 
    min-height: 48px; 
    display: flex; 
    align-items: center; 
} 

Und dann einfach verwenden Sie die Hintergrundfarbe Eigenschaft zum Ändern der Farbe.