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

Question

有没有办法在 HTML 中进行验证，以便在 Item.ItemDate < 当前日期的情况下更改该行的背景颜色？

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

标签： angularhtmlvalidation

Answer 1

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

使用

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

或者

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

更多示例在这里

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