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

Question

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

Answer 1

您要获取到期颜色的函数应如下所示：getExpiry(expiryDate: Date, issuedDate: Date) {&nbsp; &nbsp; if(expiryDate < issuedDate)&nbsp; &nbsp; &nbsp; &nbsp; expiryColor = 'red'; //expired&nbsp; &nbsp; else if(expiryDate < issuedDate.setMonth(issuedDate).getMonth() + 6);&nbsp; &nbsp; &nbsp; &nbsp; expiryColor = 'yellow'; //about to expire within 6 minths}并在模板中使用此颜色变量作为[style.background-color]="expiryColor"

Answer 2

在我看来，您可以使getExpiry方法根据结果返回一个数字：如果在有效期内，则返回0。如果还有6个月，请返回1如果已过期，则返回2。然后，您可以通过以下方式更改html中的调用：<div&nbsp;class="expDate&nbsp;expgreen"&nbsp;[style.background-color]="getExpiry(data.isCardRenewable)===&nbsp;0&nbsp;?&nbsp;'green':&nbsp;getExpiry(data.isCardRenewable)===&nbsp;1&nbsp;?&nbsp;'yellow'&nbsp;:&nbsp;'red'">