如何在ngClass中同时使用条件判断与函数

嘿，我看你想在Angular的ngClass里同时结合条件判断和返回类名的函数，思路完全没问题，但你当前的写法在语法上不对，咱们来调整一下就能实现啦～

方法一：数组形式（最简洁常用） #

ngClass支持接收数组参数，数组里可以同时放条件表达式的结果和函数返回的类名，这样两个类会被同时应用到元素上：

<div [ngClass]="[i === 1 ? 'active' : 'inactive', getclass()]"></div>

对应的TS代码保持你的写法就行，注意函数要是组件的公共方法，确保模板能访问到：

getclass(): string {
  return 'myclassname';
}

方法二：对象形式（适合更复杂的动态场景） #

如果你的需求更复杂，比如函数返回的类名是动态变化的，或者需要给不同类名加判断条件，也可以用对象形式：

<div [ngClass]="{
  'active': i === 1,
  'inactive': i !== 1,
  [getclass()]: true
}"></div>

这里[getclass()]: true表示不管函数返回什么类名，都会把它应用到元素上；如果需要加判断，也可以把true换成对应的条件表达式。

要是你的函数返回的是固定类名，也可以直接写死在对象里，不过数组形式会更简洁哦～

备注：内容来源于stack exchange，提问作者sridharkctmca