Как изменить цвет текста / элемента / css внутри * ngFor?

Question

У меня есть одно средство создания элементов, использующее массив, который создает список элементов с помощью опции * ngFor = "let.

Я хочу изменить цвет этих элементов в зависимости от их значений, но я не могу кажется, делает это.

tankItAwnserArray = ['Yes','Yes','Option','NO'];

 <ion-item *ngFor="let option of tankItAwnserArray">
        <ion-item> Move Damage:  {{option}}</ion-item>
      </ion-item>

Я хочу, чтобы значение «Да» было зеленым, «Вариант» было оранжевым, а «Нет» - красным.

Я много чего пробовал, но не вижу, как это работает.

Кто-нибудь может мне помочь?

Answer 1

    interface Colors {
    yes: string; 
    option: string;
    no: string;
    }

    const colors: Colors = {
    yes: '#336699',
    option: '#223366',
    no: '#223366'
    }

Push the colors from your JSON directly into the inline styles like...

<span [ngStyle]="{'color': colors[option.toLowercase()]}">{{option}}</span>

Answer 2

Вы можете использовать условный класс CSS с * ngClass

---

Component. HTML

<ion-item *ngFor="let option of tankItAwnserArray">
    <ion-item>
        Move Damage:  
        <span [ngClass]="{'green-class': option === 'Yes', 'orange-class': option === 'Option', 'red-class': option === 'No' }">{{option}}</span>
    </ion-item>
</ion-item>

---

Компонент. CSS

.green-class { color: green; }
.orange-class { color: orange; }
.red-class { color: red; }

---