[英]How to apply some style to the table row in angular material table
I have this table:我有这张桌子:
<div class="table-container">
<table mat-table [dataSource]="dataSource">
<mat-divider></mat-divider>
<!-- title column -->
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef> {{ 'NOTIFYCATION.NOTIFY_TITLE' | translate }} </th>
<td mat-cell *matCellDef="let element"> {{element.title}} </td>
</ng-container>
<!-- code column -->
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef> {{ 'NOTIFYCATION.DESCRIPTION' | translate }} </th>
<td mat-cell *matCellDef="let element"> {{element.description}} </td>
</ng-container>
<!-- code column -->
<ng-container matColumnDef="receiverDisplayName">
<th mat-header-cell *matHeaderCellDef> {{ 'NOTIFYCATION.RECEIVER_DISPLAY_NAME'| translate }} </th>
<td mat-cell *matCellDef="let element"> {{element.receiverDisplayName}} </td>
</ng-container>
<!-- code column -->
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> {{ 'NOTIFYCATION.TYPE'| translate }} </th>
<td mat-cell *matCellDef="let element"> {{element.type}} </td>
</ng-container>
<ng-container matColumnDef="createdOnUtc">
<th mat-header-cell *matHeaderCellDef> {{ 'USER_SUBSCRIBE.createdOnUtc' | translate }} </th>
<td mat-cell *matCellDef="let element">
<span *ngIf="lang=='fa'">{{ element.createdOnUtc | jalali }}</span>
<span *ngIf="lang!='fa'"> {{element.createdOnUtc | date: 'dd/MM/yyyy hh:mm'}} </span>
</td>
</ng-container>
<!-- actions -->
<ng-container style="color: red;" matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>
{{ 'GENERAL.ACTIONS' | translate }}
</th>
<td mat-cell *matCellDef="let row; let i=index;">
<a mat-icon-button [matTooltip]="'TOOLTIP.DETAIL' | translate">
<mat-icon aria-label="Show" (click)="showDetail(row)" class="ic-defualt">remove_red_eye
</mat-icon>
</a>
<button mat-icon-button [matTooltip]="'TOOLTIP.DELETE' | translate" color="accent" uaccess
[permission]="':GiftCode:Delete'" (click)="delete(row.id)">
<mat-icon aria-label="Delete">delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr *matCellDef="let row; let element" [ngClass]="{'highlight': element.isSeen ==='true'}">
{{element.bestRider}} </tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-progress-bar *ngIf="dataSource.loading$ | async" mode="indeterminate"></mat-progress-bar>
<mat-paginator [length]="dataSource.length$ | async" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
showFirstLastButtons></mat-paginator>
</div>
I need to change color of tr
to red
when isSeen=false
.当
isSeen=false
时,我需要将tr
的颜色更改为red
。
I try this:我试试这个:
<tr *matCellDef="let row; let element" [ngClass]="{'highlight': element.isSeen ==='true'}"></tr>
CSS: CSS:
.highlight{
color: white;
background: #673AB7;
}
but it not worked.但它没有奏效。
Whats the problem?有什么问题? how can I solve this problem?
我怎么解决这个问题?
You will need to move your style to style.css
.Also no need to add 'true' if it is a Boolean do it like您需要将您的样式移至
style.css
。如果它是 Boolean 也无需添加“true”
<tr *matCellDef="let row; let element" [ngClass]="{'highlight': element.isSeen }"></tr>
Or add::ng-deep to your style if you want to keep it in your component或者如果您想将其保留在您的组件中,请将::ng-deep 添加到您的样式中
::ng-deep .highlight{
color: white;
background: #673AB7;
}
Your last mat-header-row has missing some code and use row.isSeen
which contains the current iteration row in it.您的最后一个 mat-header-row 缺少一些代码并使用
row.isSeen
,其中包含当前迭代行。
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'highlight': row.isSeen }"></tr>
Replace last mat-header-row with above code and will work:用上面的代码替换最后一个 mat-header-row 并且可以工作:
Here is the Online_Demo
这是
Online_Demo
I think this would work perfectly.我认为这会很完美。
.highlight {
color: white;
background: #673AB7;
}
.notHighlight {
color: red;
background: #252525;
}
HTML: HTML:
[ngClass]="(element.isSeen === true) ? 'highlight' : 'notHighlight'"
OR或者
[ngClass]="(element.isSeen) ? 'highlight' : 'notHighlight'"
You can try this code:你可以试试这段代码:
HTML: HTML:
<tr *matCellDef="let row; let element" [ngClass]="{'highlight': element.isSeen ==='true'}"></tr>
CSS: CSS:
.highlight {
background-color: gold
}
I hope it will helps you!我希望它会帮助你!
Try this:尝试这个:
<mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'highlight': row.IsTrue }">
and CSS:和 CSS:
.make-gold {
background-color: gold
}
Example:例子:
https://stackblitz.com/edit/angular-mat-highlight-row-on-conditions https://stackblitz.com/edit/angular-mat-highlight-row-on-conditions
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.