Question

我正在从一个api获取发布日期，并使用插值在* ngfor中显示它，所以这是棘手的部分。

如果有效期限为绿色，则表示该卡已在其有效期限内（即，该卡要到期还有六个月的时间）。

如果到期卡为琥珀色，则表示该卡在到期6个月内或到期后。在这种情况下，续订选项将可用。

function addMonths(date, months) {
  date.setMonth(date.getMonth() + months);
  return date;
}


addMonths(new Date(), -6); // six months before now
// Thu Apr 30 2009 01:22:46 GMT-0600 

addMonths(new Date(), -12); // a year before now
// Thu Oct 30 2008 01:20:22 GMT-0600

但是我想要这样的角度，以便可以在Ngfor循环中使用它

我已经尝试了一些方法，但无法解决它。只是简单地比较了日期JavaScript。

Answer 1

我认为您只想添加基于日期更改颜色的类你可以试试看
我只是举个例子。
您的html文件

<div *ngFor="let data of yourArray">
    <div [ngClass]="checkDate(data.action_required_date)">{{data.action_required_date}}</div>
</div>

您的组件文件

checkDate(date){
    // you can put here your date logic and get return class as per your requirements
    if(yourmonth >= 6){
        return 'green';
    } else if(yourmonth < 6) {
        return 'amber';
    }
}

您的CSS文件

you can set css like
.green{color: green};
.amber{color: amber};

到期日期为

1 个答案: