Angular 11 text-decoration:line-through类绑定状态切换不生效问题

问题解决方案 #

该问题不属于text-decorationCSS属性的兼容性问题，是Angular框架的类绑定未随状态变更触发重渲染导致的，可按以下步骤排查修复：

• 第一步：先确认task.isDone状态确实在切换
  给复选框绑定change事件，在事件回调中打印task.isDone的值，确认勾选/取消勾选操作时，属性值能正常在true和false之间切换。如果值未变更，优先排查双向绑定逻辑，检查task对象的属性路径是否写对、*ngFor的trackBy配置是否存在异常。
• 第二步：检查组件变更检测策略
  如果你的组件配置了changeDetection: ChangeDetectionStrategy.OnPush，直接修改task对象的属性不会触发变更检测，需要更新整个task对象的引用来触发重渲染，示例代码如下：

  toggleTaskDone(targetTask: Task) {
    this.taskList = this.taskList.map(task => {
      if (task.id === targetTask.id) {
        // 生成新的对象引用触发变更检测
        return { ...task, isDone: !task.isDone }
      }
      return task
    })
  }
  

• 第三步：换用ngClass写法优化绑定兼容性
  你可以将[class.stroke]="task.isDone"替换为Angular内置的ngClass指令写法，减少类绑定异常概率：

  <div *ngFor="let task of taskList" [ngClass]="{ 'stroke': task.isDone }">
    {{ task.content }}
  </div>
  

• 第四步：排查CSS优先级冲突
  打开浏览器开发者工具的元素面板，查看对应任务元素的样式规则，确认是否存在更高优先级的选择器强制给元素加了text-decoration: line-through样式，导致类移除后删除线仍然显示。

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