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

Posted 2023-03-06

【中文标题】如何在到期日更改字体颜色？

【英文标题】：How do I change the font color upon the expiration date?

【发布时间】：2021-06-19 20:34:14

【问题描述】：

我想在到期日期尚未达到时设置颜色为绿色。但是当到期日期是红色的时候

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

【问题讨论】：

模板中的ticket 是什么？它是来自*ngFor 数组的变量吗？

你不需要.format('L')，因为你现在使用.diff

您正在使用局部变量color。你在哪里使用它？

【参考方案1】：

需要返回颜色变量

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
  

【参考方案2】：

你的条件不对。

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

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

解决方案：

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;
  

【讨论】：

你可以使用 [ngClass] 作为[ngClass]="isExpired?'expirationDate':'currentDate'"

是的。谢谢。 @Eliseo

【参考方案3】：

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

.expirationDate
    color:  red !important;