根据日期值更改Angular 6 / HTML5中的表格行颜色

【问题标题】：change table row color in Angular 6 / HTML5 based on a date value根据日期值更改Angular 6 / HTML5中的表格行颜色
【发布时间】：2018-10-09 08:49:46
【问题描述】：

有没有办法在 HTML 中进行验证，以便在 Item.ItemDate

<td class="text-danger">{{ Item.ItemDate | date:"MM/dd/yyyy 'at' h:mma" }}</td>

【问题讨论】：

标签： angular html validation

【解决方案1】：

是的，您可以通过使用 [ngClass] 或 [ngStyle] 指令动态设置元素类或样式来实现此目的。

使用

[ngStyle]="{'background-color':Item.ItemDate < current_date ? 'green' : 'red' }"

或

[ngClass]="{'text-danger':Item.ItemDate < current_date }"

更多例子here

请注意，您在这里比较的是一个日期，因此两个变量都应该是日期数据类型

【讨论】：

【解决方案2】：

你可以使用 NgClass 条件：

<td class="text-danger" [className]="Item.ItemDate.toDateString() < today.toDateString() ? 'yesterday' : 'tomorrow'">{{ Item.ItemDate | date:"MM/dd/yyyy 'at' h:mma" }}</td>

“明天”和“昨天”是 CSS 中的课程。

【讨论】：

【解决方案3】：

你可以的

<td class="text-danger" [class.red]="Item.ItemDate < current date">{{ Item.ItemDate | date:"MM/dd/yyyy 'at' h:mma" }}</td>

在css中

.red{
 background-color: red;
}

【讨论】：