如何将一些样式应用于角材料表中的表行 [英] How to apply some style to the table row in angular material table

问题描述

我有这张桌子:

 
<table mat-table [dataSource]="dataSource"><mat-divider></mat-divider><!-- 标题栏--><ng-container matColumnDef="title"><th mat-h​​eader-cell *matHeaderCellDef>{{ 'NOTIFYCATION.NOTIFY_TITLE' |翻译 }} </th><td mat-cell *matCellDef="let element">{{element.title}} </td></ng-容器><!-- 代码栏--><ng-container matColumnDef="description"><th mat-h​​eader-cell *matHeaderCellDef>{{ '通知.描述' |翻译 }} </th><td mat-cell *matCellDef="let element">{{element.description}} </td></ng-容器><!-- 代码栏--><ng-container matColumnDef="receiverDisplayName"><th mat-h​​eader-cell *matHeaderCellDef>{{ 'NOTIFYCATION.RECEIVER_DISPLAY_NAME'|翻译 }} </th><td mat-cell *matCellDef="let element">{{element.receiverDisplayName}} </td></ng-容器><!-- 代码栏--><ng-container matColumnDef="type"><th mat-h​​eader-cell *matHeaderCellDef>{{ '通知类型'|翻译 }} </th><td mat-cell *matCellDef="let element">{{element.type}} </td></ng-容器><ng-container matColumnDef="createdOnUtc"><th mat-h​​eader-cell *matHeaderCellDef>{{ 'USER_SUBSCRIBE.createdOnUtc' |翻译 }} </th><td mat-cell *matCellDef="let element"><span *ngIf="lang=='fa'">{{ element.createdOnUtc |jalali }}</span><span *ngIf="lang!='fa'">{{element.createdOnUtc |日期:'dd/MM/yyyy hh:mm'}} </span></td></ng-容器><!-- 动作--><ng-container style="颜色:红色;"matColumnDef="actions"><th mat-h​​eader-cell *matHeaderCellDef>{{ '一般操作' |翻译 }}</th><td mat-cell *matCellDef="let row; let i=index;"><一个 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'" (点击)="delete(row.id)"><mat-icon aria-label="Delete">delete</mat-icon></td></ng-容器><tr mat-h​​eader-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><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>

当 isSeen=false 时，我需要将 tr 的颜色更改为 red.

我试试这个:

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

CSS:

 .highlight{白颜色;背景:#673AB7；}

但是没有用.

有什么问题吗?我该如何解决这个问题?

解决方案

您的最后一个 mat-h​​eader-row 缺少一些代码，请使用包含当前迭代行的 row.isSeen.

<tr mat-h​​eader-row *matHeaderRowDef="displayedColumns"></tr><tr mat-row *matRowDef="让行；列:displayColumns;"[ngClass]="{'highlight': row.isSeen }"></tr>

用上面的代码替换最后一个 mat-h​​eader-row 即可:

这是Online_Demo

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 .

I try this :

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

CSS :

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

but it not worked.

Whats the problem? how can I solve this problem?

解决方案

Your last mat-header-row has missing some code and use row.isSeen which contains the current iteration row in it.

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

Here is the Online_Demo

这篇关于如何将一些样式应用于角材料表中的表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！