更改 Angular Material 表中的行颜色答案

【问题标题】：Change row color in Angular Material table更改 Angular Material 表中的行颜色
【发布时间】：2019-03-12 03:29:05
【问题描述】：

如何根据单元格值更改材料表行的颜色。

我的 HTML 中有这个：

<mat-table [dataSource]="dataSource" class="mat-elevation-z2" style="margin-bottom: 10px;" matSort>

    <ng-container matColumnDef="DateAdded">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Submission Time </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.DateAdded | date: 'medium'}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="StartDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Start Date </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.StartDate | date}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="EndDate">
        <mat-header-cell *matHeaderCellDef mat-sort-header> End Date </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.EndDate | date}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="IsGranted">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Granted </mat-header-cell>
        <mat-cell *matCellDef="let row"  [ngClass]="row.IsGranted ? 'make-green' : ''"> {{row.IsGranted}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="Remarks">
        <mat-header-cell *matHeaderCellDef> Remarks </mat-header-cell>
        <mat-cell *matCellDef="let row" [style.color]="row.color">
        <button class="btn btn-dark btn-sm" (click)="viewRemarks(row.Remarks)">Select</button>
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns" [ngClass]="{'make-green': row.IsGranted==true}"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;">
                </mat-row>
    </mat-table>

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

还有我的 CSS ：

.make-gold {
    background-color: gold
}

这会产生以下结果：

我需要改变整行的背景颜色。不仅仅是细胞。谢谢。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

我假设您想在IsGranted 值为真时应用make-gold 类。如果是这种情况，试试这个：

<mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'make-gold': row.IsGranted }">

另见stackblitz demo。

编辑

还有一个简写语法：

<mat-row ... [class.make-gold]='row.IsGranted' [class.another-class]="true">

【讨论】：

@leopard 单元格颜色而不是整行颜色怎么样？
@user15122827 在 mat-cell 上尝试同样的操作

【解决方案2】：

<tr mat-header-row *matHeaderRowDef="displayedColumns" [ngClass]="{accent:true}">

如果您需要使用accent 或primary 或warn

【讨论】：