セルの値に応じてマテリアルテーブルの行の色を変更するにはどうすればよいですか。
私はこれを私の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
}
必要なのは、行全体の背景色を変更することです。細胞だけではありません。ありがとうございました。
値がtrueのmake-gold
ときにクラスを適用したいと思いIsGranted
ます。この場合は、次のことを試してください。
<mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'make-gold': row.IsGranted }">
stackblitzデモも参照してください。
省略構文もあります。
<mat-row ... [class.make-gold]="IsGranted" [class.another-class]="true">
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加