показать другой цвет на карте, сравнивая выпущенный и срок годности Angular 7

Question

Я показываю одну дату, т.е. дату выдачи, которую я получаю от остальных API, я получаю дату выпуска и дату истечения срока действия от API.что мне нужно сделать, это сравнить дату выпуска и срок годности и показать другой цвет фона.Ниже приведены логика и код с ответом API. Дата истечения срока действия. Если срок действия истекает зеленым цветом, это означает, что срок действия карты истек (т.е. до истечения шести месяцев до истечения срока действия карты).Опция продления не будет доступна в этом случае.Если карта истечения срока действия имеет янтарный цвет, это означает, что срок действия карты истекает через 6 месяцев после истечения срока годности.Опция продления будет доступна в этом случае.Если дата окончания срока действия красного цвета, это означает, что срок действия карты истек через 6 месяцев.В этом случае опция продления будет недоступна.

Ответ API

{
    "data": [{
        "customerCardId": "J7dtdPoIMcIcMWOiSi1xXA==",
        "cardTypeName": "Basic Skills Card",
        "cardBackImageId": "+71GMR+l5/iE7c5xMaPmyg==",
    "cardFrontImageId": "+71GMR+l5/iE7c5xMaPmyg==",
    "cardExpiryDate": "2020-01-15T06:56:07.890+0000",
    "cardIssueDate": "2018-01-15T06:56:07.890+0000",
    "hasPhysicalCard": false,
    "isCardRenewable": true,
    "isPartnerCard": false,
    "occupationQualifications": [{
        "occupationId": "at92D45gZwLCd7uJvy+QrA==",
        "occupationName": "bricklaying",
        "qualificationId": "bct5lbkNpuWhL6uGwWDA5w==",
        "qualificationName": "Level 1 Diploma by City & Guilds",
        "awardingBodyId": "J7dtdPoIMcIcMWOiSi1xXA==",
        "awardingBodyName": "City & Guilds",
        "certificateNo": null,
        "certificateExpiryDate": null,
        "achievementDate": "1970-01-15T06:56:07.890+0000",
        "documents": []
    }]
}],
"totalRecords": 1,
"serviceResponseCode": "card-list-200",
"error": null
}            

<div class="cardWrap cardTypeList" *ngFor="let data of cardData; let i=index">

            <div class="cardHeader">
                <div class="row">
                    <div class="headTitle col-sm-6">
                        <span class="imageIcon cardIcon"></span>
                        {{data.cardTypeName}}
                    </div>
                </div>
            </div>
            <div class="cardContent">
                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-4 text-center cardTypeImg">
                            <img *ngIf="docId === ''" src="../../assets/images/person-1.jpg" alt="person" />
                            <img *ngIf="docId != ''" [src]="profileImage" alt="gold card" />
                        <div class="seeBack text-center">
                            <a *ngIf="imageSide" (click)="getfile(data.cardFrontImageId)" class="underLine">See Front</a>
                            <a *ngIf="!imageSide" (click)="getfile(data.cardBackImageId)"  class="underLine">See Back</a>
                        </div>
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-8 cardTypeContent">

                        <div class="expDate expgreen" [ngStyle]="{'background-color':getExpiry(data.isCardRenewable)}">
                            Expiry Date
                            <strong >{{data.cardExpiryDate | date: 'dd/MM/yyyy'}}</strong>
                        </div>
                        <div *ngFor="let qualificationdata of data.occupationQualifications">
                            <h6>Occupation</h6>
                            <p> {{qualificationdata.occupationName}}</p>
                            <h6>Qualification</h6>
                            <p> {{qualificationdata.qualificationName}}</p>
                        </div>
                        <div class="cardAction cardTypeAction">
                            <ul>
                                <li *ngIf=data.isCardRenewable class="updateCard">
                                    <div class="actionIcon">
                                        <a herf="#">Update Card</a>
                                    </div>
                                </li>
                                <li *ngIf=data.isCardRenewable class="renewCard">
                                    <div class="actionIcon">
                                        <a herf="#">Renew Card</a>
                                    </div>
                                </li>
                                <li *ngIf=data.isCardRenewable class="lostCard">
                                    <div class="actionIcon">
                                        <a herf="#">Lost Card</a>
                                    </div>
                                </li>
                                <li  *ngIf=data.hasPhysicalCard  class="lostCard">
                                        <div class="actionIcon">
                                            <a herf="#">Physical Card</a>
                                        </div>
                                    </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

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'">