Angular 12中如何为ngClass配置多个组合判定条件？

原写法失效原因 #

你给出的写法存在两个核心问题：

1. 引号嵌套错误：外层用单引号包裹[ngClass]的绑定值，内部类名也使用单引号，会触发Angular模板语法解析错误
2. 逻辑使用错误：&&是逻辑与运算符，不能用来拼接两个独立的类名判断分支，加上三元运算符优先级低于&&，最终只有第一个条件的判断结果会生效

正确实现方式 #

对象写法（最推荐） #

每个类名对应独立的判断条件，所有满足条件的类都会被自动添加，可读性和可维护性最高：

[ngClass]="{
  'className1': condition1,
  'className2': !condition1,
  'classNameY': conditionX,
  'classNameZ': !conditionX
}"

如果需要多条件组合判定某个类，直接在值的位置写组合逻辑即可：

[ngClass]="{'combinedClass': condition1 && !conditionX}"

字符串拼接写法（适合三元分支场景） #

如果需要用三元表达式实现，需明确把每个三元的结果用字符串拼接的方式组合，注意中间加空格避免类名粘连：

[ngClass]="(condition1 ? 'className1' : 'className2') + ' ' + (conditionX ? 'classNameY' : 'classNameZ')"

数组写法（适合固定类+动态类组合场景） #

也可以用数组嵌套对象/三元的方式实现，适合存在固定类名的场景：

[ngClass]="['fixedClass', condition1 ? 'className1' : 'className2', {'classNameY': conditionX, 'classNameZ': !conditionX}]"

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