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方法根据结果返回一个数字：

如果在有效期内，则返回0。
如果还有6个月，请返回1
如果已过期，请返回2。

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

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

Answer 2

用于获取到期颜色的函数应该看起来像

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"

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

2 个答案: