首頁(yè) 猿問(wèn) 通過(guò)比較簽發(fā)日期和到期日期在卡上顯...

通過(guò)比較簽發(fā)日期和到期日期在卡上顯示不同的顏色Angular 7

JavaScript

哈士奇WWW 2021-05-11 17:30:20

我正在顯示一個(gè)日期，即發(fā)布日期，這是我從其余API獲取的日期，我正在從API獲取發(fā)布日期和到期日期。我需要做的是比較簽發(fā)日期和到期日期，并顯示不同的背景顏色。API響應(yīng)的邏輯和代碼如下，到期日期如果到期日期為綠色，則表示該卡已在其有效期內(nèi)（即，直到卡到期還剩六個(gè)月）。在這種情況下，續(xù)訂選項(xiàng)將不可用。如果到期卡為琥珀色，則表示該卡在到期后的6個(gè)月內(nèi)或到期后。在這種情況下，可以使用續(xù)訂選項(xiàng)。如果到期日期為紅色，則表示該卡已過(guò)期6個(gè)多月。在這種情況下，續(xù)訂選項(xiàng)將不可用。

查看完整描述

2 回答

BIG陽(yáng)

TA貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個(gè)贊

您要獲取到期顏色的函數(shù)應(yīng)如下所示：

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"

反對(duì) 回復(fù) 2021-05-27

猛跑小豬

TA貢獻(xiàn)1858條經(jīng)驗(yàn) 獲得超8個(gè)贊

在我看來(lái)，您可以使getExpiry方法根據(jù)結(jié)果返回一個(gè)數(shù)字：

如果在有效期內(nèi)，則返回0。
如果還有6個(gè)月，請(qǐng)返回1
如果已過(guò)期，則返回2。

然后，您可以通過(guò)以下方式更改html中的調(diào)用：

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

反對(duì) 回復(fù) 2021-05-27