изменить цвет строки таблицы в Angular 6 / HTML5 на основе значения даты

Question

Есть ли способ проверки в HTML, чтобы я мог изменить цвет фона этой строки, если Item.ItemDate <текущая дата? </p>

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

Answer 1

Вы можете сделать

<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 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.

Answer 3

да, вы можете достичь этого, используя директиву [ngClass] или [ngStyle] для динамической установки классов элементов или стиля.

с использованием

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

или

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

еще пример здесь

обратите внимание, что вы сравниваете здесь дату, поэтому обе переменные должны иметь тип данных date