将删除线元素保存到待办事项列表的本地存储答案

【问题标题】：saving strike through element to local storage for To Do list将删除线元素保存到待办事项列表的本地存储
【发布时间】：2019-12-07 08:26:03
【问题描述】：

我正在制作一个待办事项列表，并且很难理解如何将 css 删除元素保存到本地存储中。

HTML 代码：

<ul class="list-group">
    <li *ngFor="let todo of todos; let i = index"
        class="list-group-item shadow p-3 mb-5 bg-white rounded border border-dark rounded" id="myTask">
        <input type="checkbox" (click)='update()'><span>
        {{todo.task}} <button type="button" class="btn btn-danger" (click)="delete()">X</button>
        </span>
    </li>
</ul>

打字稿代码：

 update() {
    localStorage.setItem('checkbox', JSON.stringify(this.todos));

  }

CSS 代码：

input[type="checkbox"]:checked+span {
    text-decoration: line-through;
    color: red;
  }

【问题讨论】：

有什么问题？
您的代码看起来不错。当您尝试获取这些物品时会发生什么？

标签： html css angular typescript web-applications

【解决方案1】：

<ul class="list-group">
    <li *ngFor="let todo of todos; let i = index"
        class="list-group-item shadow p-3 mb-5 bg-white rounded border border-dark rounded" id="myTask">
        <input type="checkbox" (change)='update()' [(ngModel)]="todo.checked"><span>
        {{todo.task}} <button type="button" class="btn btn-danger" (click)="delete()">X</button>
        </span>
    </li>
</ul>

在你的 todos 数组项中添加一个属性，并使用模型将其绑定到变量，并基于模型添加 css 并将其存储在本地存储中

update() {
    localStorage.setItem('checkbox', JSON.stringify(this.todos));

  }

现在，当您保存待办事项列表时，它将包含已选中和未选中的一个为真和假

【讨论】：