Angular 9 动态改变垫子行颜色

Question

我这样比较 2 个日期

for (let i = 0; i < 9; i++) {

    this.date1 = formatDate(data.elements[i].date_expiration, 'yyyy-MM-dd', 'fr_FR');
    this.date2 = formatDate(new Date(), 'yyyy-MM-dd', 'fr_FR');
    this.date1 = Date.parse(this.date1);
    this.date2 = Date.parse(this.date2);
    this.result = this.date1 >= this.date2 ? true : false;
    console.log(this.result);
    if (this.date1 >= this.date2) {
        this.isExpire = true;
    } else {
        this.isExpire = false;
    }

}

这个工作很好，我在控制台中看到 1 个 false 和 8 个 true

<mat-row *matRowDef="let assets; columns: displayedColumns;" [ngClass]=" isExpire ? 'is-red' : 'is-white' "></mat-row>

但是我所有的行现在都是红色的

怎么了？

Answer 1

Jean，你有一个对象数组。您需要向对象添加一个新的属性以了解该对象是否已过期（您不能使用唯一变量）。为此，在获取数据后使用 forEach（我想在订阅函数中）

data.elements.forEach((x:any)=>{
   //x is the object
    const date1 = formatDate(x.date_expiration, 'yyyy-MM-dd', 'fr_FR');
    const date2 = formatDate(new Date(), 'yyyy-MM-dd', 'fr_FR');
    //you create the new property only write x.nameOfproperty
    //see that, as you formated the data as yyyy-MM-dd, you needn't
    //calculate the real Date,e.g. two string: "2020-02-15" is less than "2020-07-20"
    x.isExpire=date1>=date2
})

然后使用新的属性“询问”属性

<mat-row *matRowDef="let assets; columns: displayedColumns;" 
    [ngClass]=" assets.isExpire ? 'is-red' : 'is-white' ">
</mat-row>

Angular 9 动态改变垫子行颜色

Angular 9 change mat row color dynamically

datatable

mat

ng-class

angular