Angular 11 - 文本修饰：直通不能与 class 绑定一起正常工作

Question

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

我的.css 文件

.stroke{
    text-decoration: line-through
}

和 .html 文件中的元素

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

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

这是第一次加载时的样子。

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

是的，我将 task.isDone 与复选框

绑定

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

我在最新版 chrome 和最新版 Safari

上试过了

有没有人遇到过类似的文字修饰问题属性？

Answer 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

Angular 11 - 文本修饰：直通不能与 class 绑定一起正常工作

Angular 11 - text-decoration: line-through does not work properly with class binding

css

angular

binding

angular11

angular-ng-class