angular - ionic3 ngfor with different css -


i looping array list, , object in include key value 'isread': 0/1,

and below the html code:

  <button ion-item text-wrap *ngfor="let notice of notices" ng-style="{ 'background': notice.isread=='1': ? '#dcf7e3': '#ffffff' }">   <ion-avatar item-start>     <img src="{{notice.imageurl}}" style="border-radius:0px;">   </ion-avatar>   <h3 [hidden]="slang!='en'" style="color:#172845;">{{notice.msgen}}</h3>   <h3 [hidden]="slang!='zh'" style="color:#172845;">{{notice.msgtw}}</h3> </button> 

my problem want using "isread" have different background color, seems not working, have idea?

avoid inline styles, can change class like:

[ngclass]="{'class1': notice.isread == 1, 'class2': notice.isread == 0}" 

then in css file:

.class1 {  background: #dcf7e3; } .class2 {  background: #ffffff; } 

you can change class names more relevant purpose.


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -