私はこのテーブルを持っています:
<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>
isSeen=false
のときにtr
の色をred
に変更する必要があります。
私はこれを試します:
<tr *matCellDef="let row; let element" [ngClass]="{'highlight': element.isSeen ==='true'}"></tr>
CSS:
.highlight{
color: white;
background: #673AB7;
}
しかし、うまくいきませんでした。
どうしたの?この問題を解決するにはどうすればよいですか?
これは完璧に機能すると思います。
.highlight {
color: white;
background: #673AB7;
}
.notHighlight {
color: red;
background: #252525;
}
HTML:
[ngClass]="(element.isSeen === true) ? 'highlight' : 'notHighlight'"
OR
[ngClass]="(element.isSeen) ? 'highlight' : 'notHighlight'"
あなたはこのコードを試すことができます:
HTML:
<tr *matCellDef="let row; let element" [ngClass]="{'highlight': element.isSeen ==='true'}"></tr>
CSS:
.highlight {
background-color: gold
}
お役に立てれば幸いです。
これを試して:
<mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'highlight': row.IsTrue }">
およびCSS:
.make-gold {
background-color: gold
}
例:
https://stackblitz.com/edit/angular-mat-highlight-row-on-conditions