在Angular2中动态设置样式

Question

我有以下标记

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

如上所述，如果activity.status字段处于待处理状态，则将背景颜色设为红色，否则为绿色。但它不起作用。检查后，我发现它呈现出像

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

Answer 1

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

或

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

对于渲染结果，另请参阅In RC.1 some styles can't be added using binding syntax

Answer 2

bind-前缀替代也可以如下使用

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