通过比较签发日期和到期日期在卡上显示不同的颜色Angular 7

Question

我正在显示一个日期，即发布日期，这是我从其余API获取的日期，我正在从API获取发布日期和到期日期。我需要做的是比较签发日期和到期日期，并显示不同的背景颜色。API响应的逻辑和代码如下，到期日期如果到期日期为绿色，则表示该卡已在其有效期内（即，直到卡到期还剩六个月）。在这种情况下，续订选项将不可用。如果到期卡为琥珀色，则表示该卡在到期后的6个月内或到期后。在这种情况下，可以使用续订选项。如果到期日期为红色，则表示该卡已过期6个多月。在这种情况下，续订选项将不可用。

Answer 1

您要获取到期颜色的函数应如下所示：

getExpiry(expiryDate: Date, issuedDate: Date) {

    if(expiryDate < issuedDate)

        expiryColor = 'red'; //expired

    else if(expiryDate < issuedDate.setMonth(issuedDate).getMonth() + 6);

        expiryColor = 'yellow'; //about to expire within 6 minths

}

并在模板中使用此颜色变量作为

[style.background-color]="expiryColor"

Answer 2

在我看来，您可以使getExpiry方法根据结果返回一个数字：

1. 如果在有效期内，则返回0。

2. 如果还有6个月，请返回1

3. 如果已过期，则返回2。

然后，您可以通过以下方式更改html中的调用：

<div class="expDate expgreen" [style.background-color]="getExpiry(data.isCardRenewable)=== 0 ? 'green': getExpiry(data.isCardRenewable)=== 1 ? 'yellow' : 'red'">