Angular 6: условно изменить цвет фона элемента

Question

Я недавно создал новый проект в Angular 6, и весь мой предыдущий опыт связан с Angular 1.5.

Я хотел бы контролировать цвет фона элемента в моей HTML-странице на основе его текстазначение.

• VALID: Зеленый
• PAUSED: Orange
• INVALID: Red

Есть ли способ сделать это специально с помощью угловых методовкак ngStyle или что-то в этом роде, а не просто написание функции jQuery в компоненте для изменения класса CSS на основе значения?

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

Изменение фона для .producerState span на основе текстового значения.

Answer 1

Прежде всего вы никогда не должны использовать JQuery и Angular вместе.

и вы можете использовать ngStyle

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

или ngClass

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