离子3条件下的颜色变化

Question

I want to change the color based on a condition. I display the n number of cards the card background must change based on the condition.

 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> 

it will update the color which satisfy the condition at the end of the loop

thanks in advance

Answer 1

Simply use :

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

Answer 2

1. NgStyle directive lets you set a given DOM elements style properties.

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

2. NgClass directive allows you to set the CSS class dynamically for a DOM element.

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

3. Also you can create your own custom function like

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