изменение цвета при условии в ионной 3

Question

Я хочу изменить цвет в зависимости от условия. Я показываю n карточек, фон карты которых должен меняться в зависимости от состояния.

users.map((item)=>{

if(item.userType == "private"){

document.documentElement.style.setProperty('--customcolor',"yellow");

}

else if(item.userType == "private"){

document.documentElement.style.setProperty('--customcolor',"blue");

}

});

 :root {
    --customcolor: red;
  }
  
  .oddmes {
    background-color: var(--customcolor);
  }
  

<ion-list><br/>
 <ion-card  class="oddmes" *ngFor="let user of users">
  <ion-card-content >
     <b>{{user.user_name}} </b>
     <p>{{user.feedback}}</p>
    </ion-card-content>
   </ion-card>
 </ion-list>

обновит цвет, который удовлетворяет условию в конце цикла

спасибо заранее

Answer 1

1. NgStyle директива позволяет вам установить свойства стиля заданных элементов DOM.

   [ngStyle]="{'background-color':user.userType === 'private' ? 'green' : 'red' }"

2. NgClass позволяет динамически устанавливать класс CSS для элемента DOM.

   [ngClass]="{'text-success':user.userType === 'private'}"

3. Также вы можете создать свою собственную пользовательскую функцию, такую ​​как

   [ngStyle]="{'color':getColor(user.userType)}"

Answer 2

Просто используйте:

<div [color]="item.userType == 'private' ? 'primary' : 'secondary'"> 
Dynamic color 
</div>