angular - 更改 Angular Material 表中的行颜色
问题描述
如何根据单元格值更改材料表行的颜色。
我的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
}
我需要的是改变整行的背景颜色。不仅仅是细胞。谢谢你。
解决方案
我假设您想在值为 truemake-gold
时应用类。IsGranted
如果是这种情况,试试这个:
<mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'make-gold': row.IsGranted }">
另请参阅stackblitz 演示。
编辑
还有一个简写语法:
<mat-row ... [class.make-gold]='row.IsGranted' [class.another-class]="true">
推荐阅读
- javascript - CORS 策略已阻止从源“http://localhost:3000”访问“https://randomuser.me/api/?results=4”获取:
- javascript - json树结构的文件路径
- javascript - 对底部放置空单元格的 HTML 表格进行排序
- python - 将元素插入到特定索引处的列表中
- linux - 使用 Go 生成适合 `/etc/shadow` 的哈希密码字符串
- string - 从给定的字符串中删除数字
- python - pyautogui 检测按钮变化
- javascript - 为什么“this”在 lambda 中的行为与使用 jQuery 的“function()”中的行为不同?
- javascript - 如何在移动设备的屏幕中设置我的 iframe
- rdf - 语义网中的组合与继承