设置样式动态地Angular2

问题描述：

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

，因为它说，如果activity.status场挂起然后进行背景色红，否则绿色。但它不起作用。检查后，我发现它呈现它像

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

答

[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

有不同的方法和替代品可能是在其他情况下更方便。 –

这回答我的问题，我会在等待时间过去时接受它，只是奖金问题，如果我使用'[style.background-color] =“setBackgroundColor（）”'并在组件中定义该函数，它会给出错误说'self .parent.context.setBackgroundColor不是一个函数。你能帮助我吗？还是我应该提出另一个问题？ – Imad

我看过这个错误信息，但我不记得是什么原因造成的。一条建议。不要在视图绑定（仅限事件处理程序）中使用方法调用，因为每次运行更改检测时都会调用此方法。此外，如果该方法每次调用返回一个新的对象实例，如'return {a：b};'，则会从Angulars更改检测中获得一个例外。而是将方法调用的结果分配给一个属性并绑定到该属性，或者如果您仍想使用方法，请缓存结果并在参数未更改的情况下返回缓存实例。 –

设置样式动态地Angular2

相关推荐