在 Angular 中动态设置样式答案

【问题标题】：Set style dynamically in Angular在 Angular 中动态设置样式
【发布时间】：2021-09-18 16:41:12
【问题描述】：

我有以下标记

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

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

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

【问题讨论】：

标签： angular

【解决方案1】：

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

或

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

【讨论】：

有不同的方法，在其他情况下替代方案可能更方便。
我看到了这个错误信息，但我不记得是什么原因造成的。一条建议。不要在视图绑定（仅限事件处理程序）中使用方法调用，因为每次更改检测运行时都会调用此方法。此外，如果该方法在每次调用（如return { a: b };）时都返回一个新对象实例，那么您将从 Angulars 更改检测中获得异常。而是将方法调用的结果分配给一个属性并绑定到该属性，或者如果您仍想使用某个方法，请缓存结果并返回缓存的实例，以防参数未更改。
“新问题” - 我想这是个好主意。我想它需要更多的细节（代码）来诊断。
从 .ts 类中以编程方式执行此操作的最佳方法是什么？

【解决方案2】：

试试这个：

[ngStyle]="{'border': user?.keyResults.percentage > 50 ? '3px solid green' : '3px solid red' }"

【讨论】：

【解决方案3】：

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

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

【讨论】：