角度6：有条件地更改元素的背景颜色

Question

我最近在Angular 6中创建了一个新项目，而我以前的所有经验都是在Angular 1.5中进行的。

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

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

有没有一种方法专门针对诸如ngStyle之类的Angular方法，而不仅仅是在组件中编写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'}">