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

Question

I want set color when the expiration date has not yet been reached green. But when the expiration date is red

 .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

You need to return the color variable

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

Your condition is wrong.

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

You are setting trying to set the color green when the date is expired and red for the opposite.

Solution:

HTML:

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

TypeScript:

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

Have you tried adding?important on the color. eg

.expirationDate{
    color:  red !important;
}