Angular 9 中[ngClass]动态类绑定失效且控制台报错问题求助

错误原因 #

[ngClass] 属于 Angular 的属性绑定语法，绑定值本身就是原生JS表达式上下文，不能在内部嵌套 {{}} 插值语法，你目前的写法违反了模板语法规则，所以控制台报错。

正确实现方案 #

方案1：ES6 计算属性写法（推荐，适配多类名同时控制的场景） #

用计算属性的语法拼接动态类名作为对象键：

<div [ngClass]="{ ['clr-' + (students.rollNo + 1)]: students.active }"></div>

方案2：ngClass 直接接收字符串（适配仅控制单个动态类的场景） #

如果当前div只需要控制这一个动态样式类，可以简化为三元表达式写法：

<div [ngClass]="students.active ? 'clr-' + (students.rollNo + 1) : ''"></div>

方案3：原生类绑定写法 #

也可以直接使用Angular的类绑定语法实现：

<div [class]="students.active ? 'clr-' + (students.rollNo + 1) : ''"></div>

以上所有写法生成的类名都和你CSS中预定义的 .clr-5、.clr-6 等规则完全匹配，不需要修改现有CSS即可正常生效。

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