角9动态改变垫排颜色

Question

我比较了两次这样的约会

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

}

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

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

但我所有的争吵现在都是红色的

怎么了？

Answer 1

琼，你有一个数组的对象。您需要向对象添加一个新属性，以了解该对象是否过期(不能使用唯一变量)。为此，在获得数据后使用一个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>