text-decoration：line-through 在 Angular 11 中无法与类绑定一起正常工作答案

【问题标题】：Angular 11 - text-decoration: line-through does not work properly with class bindingtext-decoration：line-through 在 Angular 11 中无法与类绑定一起正常工作
【发布时间】：2021-11-18 07:05:28
【问题描述】：

所以我正在制作一个待办事项应用程序，我想为已完成的任务添加笔划，但问题是它无法正常工作。

我的 .css 文件

.stroke{
    text-decoration: line-through
}

以及 .html 文件中的元素

<div *ngFor="..." [class.stroke]="task.isDone">Task Text </div>

正在发生的事情是，无论 isDone 最初具有的值将决定该项目是否获得笔画。因为当我稍后切换它时，它不会改变，但它应该改变！

这是它首次加载时的样子。

但是当我取消选中它时。通过的线不会消失

是的，我正在用复选框绑定 task.idDone

    [(checked)]="task.isDone"
    [class.stroke]="task.isDone"

我在最新版本的 chrome 和最新版本的 Safari 上尝试过

有没有人遇到过关于 text-decoration 属性的类似问题？

【问题讨论】：

您能否将任务数据附加到问题中？
请立即查看

标签： css angular class binding

【解决方案1】：

使用[(ngModel)] 绑定。

<div *ngFor="let task of tasks" [class.stroke]="task.isDone">
  <input type="checkbox" [(ngModel)]="task.isDone" />
  {{ task.name }}
</div>

或

使用(change) 事件和[checked] 绑定。

<div *ngFor="let task of tasks" [class.stroke]="task.isDone">
  <input type="checkbox" [checked]="task.isDone" (change)="task.isDone = !task.isDone" />
  {{ task.name }}
</div>

Sample Solution on StackBlitz

【讨论】：