Как применить стиль к строке таблицы в таблице угловых материалов

Question

У меня есть эта таблица:

    <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>

Мне нужно изменить цвет tr на red, когда isSeen=false.

Я пробую это:

<tr *matCellDef="let row; let element" [ngClass]="{'highlight': element.isSeen ==='true'}"></tr>

CSS:

 .highlight{
    color: white;
    background: #673AB7;
  }

но это не сработало.

В чем проблема? как я могу решить эту проблему?

Answer 1

В вашей последней строке заголовка mat отсутствует некоторый код, и используйте row.isSeen, в котором содержится текущая строка итерации.

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'highlight': row.isSeen }"></tr>

Замените последнюю строку заголовка mat на приведенный выше код и будет работать:

Вот это Online_Demo

Answer 2

Вам нужно будет переместить ваш стиль на style.css. Также не нужно добавлять 'true', если это логическое значение, сделайте это как

<tr *matCellDef="let row; let element" [ngClass]="{'highlight': element.isSeen }"></tr>

или добавьте :: ng-deep в свой стильесли вы хотите сохранить его в своем компоненте

::ng-deep .highlight{
    color: white;
    background: #673AB7;
  }

демо

Answer 3

Попробуйте:

<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

Answer 4

Вы можете попробовать этот код:

HTML:

<tr *matCellDef="let row; let element" [ngClass]="{'highlight': element.isSeen ==='true'}"></tr>

CSS:

.highlight {
    background-color: gold
}

Надеюсь, это поможет вам!

Answer 5

Я думаю, что это будет работать идеально.

.highlight {
    color: white;
    background: #673AB7;
}

.notHighlight {
    color: red;
    background: #252525;
}

HTML:

[ngClass]="(element.isSeen === true) ? 'highlight' : 'notHighlight'"

ИЛИ

[ngClass]="(element.isSeen) ? 'highlight' : 'notHighlight'"