基于对象值在角度组件上应用动态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是红色的，我首先想要作为span标签的类，而第二个=>否则

Answer 1

要么

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

Answer 2

尝试[ngClass]并评估表达

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