Установите стиль динамически в Angular

У меня есть следующая разметка

<tr *ngFor='let activity of pagedWorkflowActivities' style="background-color:{{activity.status == 'Pending' ? 'red' : 'green'}}">
.
.
.
.
</tr>

Как говорится, если поле activity.status находится в состоянии ожидания, сделайте цвет фона красным, иначе зеленым. Но это не сработает. После осмотра я обнаружил, что это делает

<tr ng-reflect-style="unsafe">

Ответ 1

[style.background-color]="activity.status == 'Pending' ? 'red' : 'green'"

или же

[ngStyle]="{'backgroundColor': activity.status == 'Pending' ? 'red' : 'green' }"

Для вашего результата рендеринга см. Также В RC.1 некоторые стили нельзя добавить с помощью синтаксиса привязки

Ответ 2

bind- альтернативный префикс можно использовать также, как bind- ниже

bind-style.background-color="activity.status == 'Pending' ? 'red' : 'green'"