Ionic 3中ngClass动态绑定CSS类失效问题求助

嘿，我来帮你搞定这个ngClass的问题～首先得提醒你，Ionic 3是基于Angular（不是AngularJS）的，所以ngClass的语法和你写的AngularJS风格不一样，这就是为啥不生效的根源！

错误原因 #

你原来写的ng-class="test: data[i].complete ? 'completed' : 'notCompleted'"是AngularJS的语法，Angular里得用[ngClass]这种属性绑定的写法，而且语法逻辑也有区别。

正确的写法 #

根据你的需求（二选一的类切换），有两种常用的正确写法：

1. 三元表达式写法（最贴近你的原有思路） #

直接通过三元判断返回要应用的类名，用方括号包裹ngClass实现属性绑定：

<div [ngClass]="data[i].complete ? 'completed' : 'notCompleted'">
  <div class="dueDate">{{ data[i].dueDate }}</div>
  <div class="taskLabel">{{ data[i].taskLabel }}</div>
  <div class="checkBox">
    <img [src]="data[i].complete_url" style="width: 100%; height: 100%" (click)="...">
  </div>
</div>

2. 对象语法写法（适合多条件多类的场景） #

如果以后需要加更多条件类，这种写法更清晰，键是类名，值是布尔条件，满足条件就添加对应类：

<div [ngClass]="{ 
  'completed': data[i].complete, 
  'notCompleted': !data[i].complete 
}">
  <!-- 内部元素不变 -->
</div>

额外注意点 #

• 确保你的data数组在组件类中是可访问的（比如已经正确初始化或者从接口/服务获取到数据），不然data[i]会找不到值。
• 检查CSS里的completed和notCompleted类名有没有拼写错误，样式是否正确定义。
• 如果你是在*ngFor循环中使用，要确保循环变量正确，比如：

  <div *ngFor="let item of data; let i = index">
    <div [ngClass]="item.complete ? 'completed' : 'notCompleted'">
      <!-- 用item代替data[i]更直观 -->
    </div>
  </div>
  

• 顺便提一句，img的src绑定推荐用[src]而不是{{ }}，这是Angular的标准绑定方式，更安全也更符合框架规范。

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