根据条件更改 table [ng-class] 中元素的颜色

Question

我被卡住了，需要一些帮助。

我有一个 table 列名称 deadLine。

数据来自 MySQL 并且是 DATETIME 属性。我创建了一个函数来检查列中的日期是否已经过了今天的日期。现在我希望如果条件是 true，table 中的特定元素应该是红色。

这是我的组件：

import { Component, ViewChild, OnInit } from '@angular/core';
import { ReportsService } from '../../../../core/services/reports.service';
import { Reports } from 'src/app/shared/entity/reports.entity';
import { MatTableDataSource, MatPaginator, MatPaginatorIntl } from '@angular/material';
import { Utils } from '../../../../shared/utils';
import { formatDate } from '@angular/common';


@Component({
    selector: 'app-reports',
    templateUrl: './reports.component.html',
    styleUrls: ['./reports.component.sass'],
    providers: [
        { provide: MatPaginatorIntl, useValue: Utils.hebrewPaginator() }
    ]
})
export class ReportsComponent implements OnInit {
    public dataSource: MatTableDataSource<Reports>;
    public displayedColumns: string[] = ['deadLine', 'year', 'type', 'companyID', 'companyName'];
    @ViewChild('paginator', { read: MatPaginator, static: false }) paginator: MatPaginator;
    filterBool: Boolean;
    dataForFilter: Array<Reports>;


    constructor(private service: ReportsService) { }

    ngOnInit() {
        this.service.getReports((data) => this.onGetReportsList(data));

    }
    onGetReportsList(data) {
        data.map((report) => {
            const format = 'yyyy.MM.dd';
            const locale = 'en-US';
            report.deadLine = formatDate(report.deadLine, format, locale);
            const repDate = new Date(report.deadLine).getTime();
            const nowDay = new Date().getTime();
            if (nowDay > repDate) {
                report.deadLine += '*';
            }
        });
        this.dataForFilter = data;
        this.dataSource = new MatTableDataSource<Reports>(data);
        this.dataSource.paginator = this.paginator;
    }
}

这是 HTML 文件。

<div class="container">
    <div class="flex-menu">
        <app-home-menu (filterEvent)="applyFilter($event)" [dataSource]="dataSource"></app-home-menu>
    </div>
    <div class="mat-elevation-z8">
        <table mat-table [dataSource]="dataSource">
            <ng-container matColumnDef="companyName">
                <th mat-header-cell *matHeaderCellDef> CompanyNme </th>
                <td mat-cell *matCellDef="let element"> {{element.companyName}} </td>
            </ng-container>


            <ng-container matColumnDef="companyID">
                <th mat-header-cell *matHeaderCellDef> HP </th>
                <td mat-cell *matCellDef="let element"> {{element.companyID}} </td>
            </ng-container>

            <ng-container matColumnDef="type">
                <th mat-header-cell *matHeaderCellDef> Type </th>
                <td mat-cell *matCellDef="let element"> {{ element.name}} </td>
            </ng-container>


            <ng-container matColumnDef="year">
                <th mat-header-cell *matHeaderCellDef> Year </th>
                <td mat-cell *matCellDef="let element"> {{element.year}} </td>
            </ng-container>

            <ng-container matColumnDef="deadLine">
                <th mat-header-cell *matHeaderCellDef> DeadLine </th>
                <td mat-cell *matCellDef="let element"> {{element.deadLine}} </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <mat-paginator #paginator [pageSizeOptions]="[10, 20, 30]" [showFirstLastButtons]="true"></mat-paginator>
    </div>
</div>

Answer 1

如果要突出显示整行，可以

<tr mat-row *matRowDef="let row; columns: displayedColumns;" [class.highlightRow]="highlight(row)"></tr>

如果您只想突出显示单元格

<ng-container matColumnDef="deadLine">
                <th mat-header-cell *matHeaderCellDef> DeadLine </th>
                <td mat-cell [class.highlightRow]="highlight(element)" *matCellDef="let element"> {{element.deadLine}} 
                </td>
</ng-container>

在 .ts 文件中

highlight(row) {
  //Check if condition true or false
  if(true) {
    return true;
  } else {
    return false;
  }
}

根据代码，如果条件为真，class 'highlightRow' 将应用于该特定行，您可以在 css.

中相应地设置样式

工作示例： https://stackblitz.com/edit/angular-pgypvo

Answer 2

如果您只想添加颜色 red，最简单的方法是根据 deadLine 是否有星号 * 动态添加样式，因为您正在添加它用于已过的最后期限。

<td mat-cell [style.color]="isDue(element.deadLine) ? 'red' : ''" *matCellDef="let element"> {{element.deadLine}} </td>

如果要添加 class，请使用 ngClass

<td mat-cell [ngClass]="{'deadline': isDue(element.deadLine)}" *matCellDef="let element"> {{element.deadLine}} </td>
<!-- OR -->
<td mat-cell [class.deadline]="isDue(element.deadLine)" *matCellDef="let element"> {{element.deadLine}} </td>

isDue 函数看起来像这样

today: number = new Date().getTime();

isDue(date): boolean {
    return this.today > new Date(date).getTime();
}

而 deadline class 是

.deadline {
    color: red;
    /* Add other css properties here */
}

根据条件更改 table [ng-class] 中元素的颜色

Change color of element in table [ng-class] based on a condition

ng-class

angular-material

angular