Angular 有条件地改变元素的背景颜色

Question

我最近在 Angular 6 中做了一个新项目，我之前的所有经验都是在 Angular 1.5 中。

我想根据文本值控制 HTML 页面中项目的背景颜色。

• 有效：绿色
• 暂停：橙色
• 无效：红色

有没有办法专门使用 Angular 方法之类的方法来做到这ngStyle一点，而不仅仅是在组件中编写一个 jQuery 函数来根据值更改 CSS 类？

<span class="producerState">{{prod.producerState}}</span>

.producerState根据文本值更改跨度的背景。

Answer 1

首先，你永远不应该同时使用 JQuery 和 Angular。

你可以使用 ngStyle

[ngStyle]="yourText=='INVALID'?{'background-color':'red'} : {'background-color': 'white'}"

或 ngClass

[ngClass]="{'invalidClass': yourText=='INVALID'}">