Angular中如何在[ngClass]属性里设置无判断条件的默认类？

方案1：静态class加兜底类 + [ngClass]覆盖 #

Angular的[ngClass]指令只会追加/移除动态类，不会覆盖你写在原生class属性里的静态类。你可以直接把兜底用的背景类写到静态class里，匹配到动态条件的时候，[ngClass]添加的同优先级背景类会自动覆盖兜底类的样式：

<span class="badge bg-secondary" [ngClass]="{
  'bg-info': item.LifeCycle === 'Pipeline',
  'bg-primary': item.LifeCycle === 'In Progress',
  'bg-warning': item.LifeCycle === 'In Close-Down'
}">
  {{item.LifeCycle}}
</span>

注：这里用bg-secondary做兜底示例，你可以换成你需要的任意默认类

方案2：[ngClass]用三元链式判断（更推荐，无多余类） #

如果不想同时存在多个背景类，你可以直接把[ngClass]的值改成链式三元表达式，最后一位直接写兜底类，不需要判断条件：

<span class="badge" [ngClass]="
  item.LifeCycle === 'Pipeline' ? 'bg-info' :
  item.LifeCycle === 'In Progress' ? 'bg-primary' :
  item.LifeCycle === 'In Close-Down' ? 'bg-warning' :
  'bg-secondary'
">
  {{item.LifeCycle}}
</span>

这种写法只会给元素加一个匹配到的背景类，不会出现多个bg-*类共存的情况，也不需要担心样式优先级的问题。

内容的提问来源于stack exchange，提问作者Sandeep Thomas