如何在到期日更改字体颜色？

Question

我想在有效期还没到的时候设置颜色为绿色。但是当过期日期是红色的

.curentDate {
    color: rgb(54, 168, 54)
}

.expirationDate{
    color:  red;
}

<div class="form-group col">
    <h5 for="maintenancePackage">Maintenance Package</h5>
    <p class="{{ setexpirationDate(ticket) }}">{{ getMaPackage(ticket) }}</p>
</div>

app.ts

  setexpirationDate(ticket) {
    let color = ''
    const endDate = moment(ticket.site.maEndDate.seconds * 1000).format('L');
    const currentDate = new Date()
    const currentDateFormat = moment(currentDate).format('L');
    if (endDate < currentDateFormat) {
      color = 'curentDate'
    } else {
      color = 'expirationDate'
    }
  }

Answer 1

您需要return颜色变量

setexpirationDate(ticket) {
    let color = ''
    const endDate = moment(ticket.site.maEndDate.seconds * 1000).format('L');
    const currentDate = new Date()
    const currentDateFormat = moment(currentDate).format('L');
    if (endDate < currentDateFormat) {
      color = 'curentDate'
    } else {
      color = 'expirationDate'
    }
    return color // you need to return the value
  }

Answer 2

你的条件不对。

if (endDate < currentDateFormat) {
      color = 'curentDate'
    } else {
      color = 'expirationDate'
    }

您正在尝试在日期过期时设置颜色绿色，相反日期时设置颜色红色。

解法：

HTML:

<p [ngClass]="{isExpired?'expirationDate':'currentDate'}">{{ getMaPackage(ticket) }}</p>

打字稿：

get isExpired() {
    let color = ''
    const endDate = moment(ticket.site.maEndDate.seconds * 1000).format('L');
    const currentDate = new Date();
    const currentDateFormat = moment(currentDate).format('L');
    return endDate < currentDateFormat;
  }

Answer 3

您尝试过在颜色上添加 !important 吗？例如

.expirationDate{
    color:  red !important;
}

如何在到期日更改字体颜色？

How do I change the font color upon the expiration date?

html

css

angular

angular8

解法：