Angular NgClass条件分组场景下的写法如何简化优化

梳理现有class-3的判断规则可以发现：唯一不需要添加class-3的场景，只有value === 'value1'且released === true这一种情况，其余所有场景都需要添加该类，原本拆分的两行class-3判断完全可以合并，消除冗余。

模板内直接精简写法 #

直接把两个class-3的条件合并为一个判断即可，逻辑和原实现完全一致，且自动兼容released属性不存在的场景（此时released为undefined，属于falsy值，不会触发「不添加class-3」的分支）：

<div [ngClass]="[
  edit ? 'class-1' : 'class-2',
  !(value === 'value1' && released) ? 'class-3' : ''
]">

更易维护的抽离写法 #

如果后续类名规则还会调整，建议把类判断逻辑抽离到组件类中，避免模板堆积过多逻辑。ngClass原生支持对象格式配置（key为类名，value为布尔值表示是否添加该类），不需要写空字符串占位：

1. 在组件类中添加计算属性：

get wrapperClasses() {
  return {
    'class-1': this.edit,
    'class-2': !this.edit,
    'class-3': !(this.value === 'value1' && this.released)
  }
}

2. 模板中直接绑定该属性即可：

<div [ngClass]="wrapperClasses">

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