对于Angular 9 mat-tables,可以通过自定义行样式的方式,在一个地方设置一行的CSS颜色。具体做法如下:
.highlight {
background-color: yellow;
}
<ng-container matColumnDef="columnName">
<th mat-header-cell *matHeaderCellDef> Column Name </th>
<td mat-cell *matCellDef="let element" [ngClass]="{'highlight': element.shouldHighlight}">
{{element.columnName}}
</td>
</ng-container>
<mat-table [dataSource]="dataSource">
<!-- 列定义 -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
在上述代码中,通过[element.shouldHighlight]的值来决定是否添加highlight类。这样,当元素对象的shouldHighlight属性为true时,该行将被设置为黄色背景。
需要注意的是,需要在组件中定义dataSource和displayedColumns变量,并将数据绑定到mat-table中。这样就可以根据数据源中的属性来决定每一行的CSS样式了。
总结: Angular 9 mat-tables可以通过自定义行样式的方式,在一个地方设置一行的CSS颜色。通过在组件的CSS文件中定义自定义的CSS类,并在HTML文件中使用ngClass指令动态添加CSS类,可以根据特定属性值来设置行的CSS样式。腾讯云相关产品推荐:腾讯云云服务器(https://cloud.tencent.com/product/cvm)
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云