Angular2中ngClass结合NgFor切换样式无效果问题求助

嗨，我来帮你搞定这个问题！你现在遇到的核心问题是错误使用了attr.ng-class而非Angular官方的[ngClass]指令，而且绑定语法也不符合Angular的规则，所以样式完全没生效。

问题出在哪？ #

• Angular中动态绑定CSS类必须用[ngClass]指令（方括号是Angular属性绑定的标志），而attr.ng-class只是给DOM元素添加了一个普通的ng-class属性，Angular根本不会把它当成指令来处理，自然不会执行动态切换类的逻辑。
• 你拼接类名的思路是对的，但需要放在Angular能识别的绑定语法里。

修正后的代码 #

先处理*ngFor循环的部分：

<clr-icon 
  *ngFor="let step of steps; let i = index" 
  shape="circle" 
  class="circle" 
  [ngClass]="'circle' + (i + 1)" 
  size="36">
</clr-icon>

再处理*ngIf的判断部分：

<clr-icon 
  *ngIf="steps.length === 1" 
  shape="circle" 
  class="circle" 
  [ngClass]="'circle2'" 
  size="36">
</clr-icon>

额外优化：更灵活的条件类绑定 #

如果你的样式切换需要更复杂的条件（比如只有特定索引才应用某个类），可以用ngClass的对象语法，可读性更强：

<clr-icon 
  *ngFor="let step of steps; let i = index" 
  shape="circle" 
  class="circle" 
  [ngClass]="{
    'circle1': i === 0,
    'circle2': i === 1,
    'circle3': i === 2
  }" 
  size="36">
</clr-icon>

这样写的话，只有当索引i等于对应值时，才会给元素加上对应的类名，非常适合多条件的样式场景。

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