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

Question

是否有一种方法可以在HTML内进行验证，以便在Item.ItemDate <当前日期时更改该行的背景颜色？

with t1 as
 (
   Select Query ---- your sql code
 ) 
 select Count(*) from t1 --- count from alis

Answer 1

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

使用

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

或

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

更多示例here

  

请注意，您在此处比较的是日期，因此两个变量均应   日期数据类型

Answer 2

你可以

<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;
}

Answer 3

您可以使用NgClass条件：

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

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