根据对象值将动态CSS应用于角度组件

Question

在angular，html或css中是否有任何方法可以根据对象值动态应用CSS：

HTML：

<mat-grid-tile *ngFor="let obj of objs">    
 <span class="(value according to variable)">
   {{ obj.n }}
 </span>
</mat-grid-tile>

CSS：

.first {
  color: #db4437;
}

.second {
  color: #32cd32;
}

我想做的是， 如果 obj.n 是 red ，我想 first 作为 span 标记的类 和 second =>否则

Answer 1

尝试[ngClass]并计算表达式

<mat-grid-tile *ngFor="let obj of objs">    
  <span [ngClass]="(obj.n ==='red')? 'first' : 'second'">
  {{ obj.n }}
  </span>
</mat-grid-tile>

Take a look at this demo

Answer 2

或

<span [class.first]="obj.n === 'red'" [class.second]="obj.n !== 'red'">{{obj.n}}</span>