Angular中ngFor内ng-class不生效问题咨询

哦，我一眼就发现问题所在啦！你现在用的是Angular（2+版本），但却误用了AngularJS（1.x）里的ng-class语法——这就是你的getMasterTypeClass方法完全没触发、console.log没输出的核心原因！

核心错误：指令语法用错了 #

Angular 2+ 中，属性绑定需要用方括号[]来包裹，动态绑定样式类的正确指令是[ngClass]，而不是AngularJS时期的ng-class。Angular根本不会识别不带方括号的ng-class，自然也就不会去调用你的方法。

修正后的代码 #

只需要把HTML里的ng-class改成[ngClass]即可：

<div *ngFor="let master of masters; let i = index"> 
  <div class="m-portlet m-portlet--collapsed m-portlet--head-solid-bg m-portlet--head-sm" [ngClass]="getMasterTypeClass(master.masterID)" data-portlet="true" id="m_portlet_tools_{{master.masterID}}">

额外检查点（可选） #

如果修改后还是有问题，可以排查这两点：

• 确保getMasterTypeClass是组件类的public方法：Angular组件里的方法默认是public，但如果你手动加了private修饰符，模板就无法访问它，需要改成public
• 验证master.masterID的有效性：可以在模板里临时添加{{master.masterID}}，确认每个循环项的masterID都有正确的数值传递给方法

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