在Angular中如何删除任务列表条目并同步更新LocalStorage

现有问题梳理 #

你的代码目前有3个核心问题导致删除功能异常：

1. 任务id未赋值：addTask中直接使用了未赋值的this.id，所有任务的id都是undefined，过滤时无法匹配到对应任务
2. 删除操作未同步LocalStorage：仅修改了内存中的任务数组，没有把修改后的结果重新写入LocalStorage，刷新后被删除的任务会恢复
3. 边界逻辑缺失：初始化读取LocalStorage时空值容错错误，JSON.parse('')会抛出语法异常；removeAll仅清空了LocalStorage，没有同步清空内存数组，页面不会同步更新

修复代码 #

1. 初始化读取逻辑修复

ngOnInit() {
  const localTasks = localStorage.getItem('token');
  // 空值时返回空数组，避免解析错误
  this.tasks = localTasks ? JSON.parse(localTasks) : [];
}

2. 新增任务逻辑修复（增加唯一id生成）

addTask() {
  var el: Result = {
    id: Date.now(), // 用时间戳生成唯一id，无需额外维护自增变量
    name: this.activity.name,
    end: this.endTime,
    start: this.startTime,
    length: this.display,
  };

  this.tasks.push(el);
  localStorage.setItem('token', JSON.stringify(this.tasks));
  this.activity.name = '';
  this.modalboxActive = false;
  this.resetTimer();
}

3. 单个删除逻辑修复

removeTask(id: number) {
  this.tasks = this.tasks.filter((item) => item.id !== id);
  // 将修改后的数组重新写入LocalStorage
  localStorage.setItem('token', JSON.stringify(this.tasks));
}

4. 批量删除逻辑修复

removeAll() {
  localStorage.clear();
  // 同步清空内存数组，触发页面更新
  this.tasks = [];
}

可选优化 #

你当前把*ngFor写在了ul标签上，会循环生成多个ul节点，建议调整结构把循环指令移到内部卡片元素上，不影响现有功能正常运行。

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