我正在制作待办事项列表，但很难理解如何将 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>
typescript 代码:
update() {
localStorage.setItem('checkbox', JSON.stringify(this.todos));
}
CSS 代码:
input[type="checkbox"]:checked+span {
text-decoration: line-through;
color: red;
}
最佳答案
<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 数组项中添加一个属性，并使用模型将其绑定(bind)到变量，并根据模型添加 css 并将其存储在本地存储中
update() {
localStorage.setItem('checkbox', JSON.stringify(this.todos));
}
现在，当您保存待办事项列表时，它将包含已选中和未选中的 true 和 false
关于html - 将删除线元素保存到待办事项列表的本地存储，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59224248/