如何在到期日更改字体颜色?
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;
【讨论】:
以上是关于如何在到期日更改字体颜色?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 UIAlertController 中更改 UIAlertAction 的字体大小和颜色
如何在grapesjs的默认富文本编辑器上添加颜色选择器来更改字体颜色?