Angular使用ngClass按指定条件绑定多个CSS类的实现方法

问题解决方案 #

你可以通过以下两种常用的ngClass语法实现需求，两种写法效果完全一致：

写法1：沿用对象语法（和你现有代码风格统一） #

ngClass的对象配置支持同时定义多个CSS类，给两个类配置相同的判断条件即可：

class="opacity87" [ngClass]="{
  'enabled-input': dealDispositionFormFields.isSubtenantTakingFullSpace === 'No',
  'deal-form-date-picker': dealDispositionFormFields.isSubtenantTakingFullSpace === 'No'
}"

如果希望避免重复写判断条件，可以提前在组件类中把判断结果封装为布尔型变量，例如isSubtenantNotTakingFullSpace，代码会更简洁易读：

class="opacity87" [ngClass]="{
  'enabled-input': isSubtenantNotTakingFullSpace,
  'deal-form-date-picker': isSubtenantNotTakingFullSpace
}"

写法2：数组语法（更适配同条件控制多类的场景） #

直接用三元表达式做判断，条件成立时返回包含两个类的数组，不成立时返回空数组即可：

class="opacity87" [ngClass]="dealDispositionFormFields.isSubtenantTakingFullSpace === 'No' ? ['enabled-input', 'deal-form-date-picker'] : []"

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