Angular中如何向ngClass传递含变量的多CSS类名？

你原代码的问题在于属性绑定（[ngClass]）中不能使用{{}}插值表达式，属性绑定内部需要直接写TypeScript表达式，而非模板插值语法。以下是几种正确的实现方式：

方式1：字符串拼接 #

通过+运算符将固定类名与变量拼接，注意类名之间要加空格分隔：

<div [ngClass]="isItem ? 'item ' + itemName : 'noItem ' + itemName"></div>

方式2：数组形式（推荐） #

用数组分别存放固定类名和变量类名，Angular会自动处理类名间的空格，更直观不易出错：

<div [ngClass]="isItem ? ['item', itemName] : ['noItem', itemName]"></div>

方式3：对象形式（适合复杂条件） #

如果需要更精细地控制每个类的生效条件，可以用对象语法，动态类名用方括号包裹作为对象键：

<div [ngClass]="{
  'item': isItem,
  'noItem': !isItem,
  [itemName]: true
}"></div>

这种方式下，item或noItem会根据isItem的值生效，同时始终添加itemName对应的类。

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