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

Posted

技术标签:

【中文标题】如何在到期日更改字体颜色?【英文标题】: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;

【讨论】:

以上是关于如何在到期日更改字体颜色?的主要内容,如果未能解决你的问题,请参考以下文章

如何更改Android Studio的代码字体和颜色

如何更改Android Studio的代码字体和颜色

如何在 UIAlertController 中更改 UIAlertAction 的字体大小和颜色

如何在grapesjs的默认富文本编辑器上添加颜色选择器来更改字体颜色?

如何更改 Matplotlib 中颜色条刻度标签的字体大小?

如何修改PPT中的超链接字体颜色