使用Angular CDK拖拽调整列表顺序后如何在刷新时保留状态

你的代码存在3个核心问题，直接导致刷新后状态重置：

• 初始化加载逻辑错误：你调用getAllTasks()后把所有任务全部推入了toDo数组，没有根据任务当前所属的状态（待办/进行中/已完成）分配到对应列表
• 拖拽修改后无持久化逻辑：drop事件中你只修改了前端内存里的三个数组值，没有把最新的任务状态、排序顺序同步到本地存储或者后端数据库，页面刷新后内存数据清空，自然回到初始状态
• 数据结构缺失关键字段：你当前只存了任务名称字符串，没有给任务加唯一标识、状态字段、排序字段，无法区分不同任务、记录它的所属列表和排列顺序

步骤1：调整任务数据结构 #

先给你的Tasks实体补充3个必备字段：

// ../tasks.ts
export interface Tasks {
  id: number; // 任务唯一标识
  project_name: string;
  status: 'todo' | 'doing' | 'done'; // 任务所属状态
  sort_order: number; // 同状态下的排序权重，数值越小排越前
}

步骤2：修改初始化加载逻辑 #

加载所有任务时按状态分组、按排序字段排序后分配到对应数组：

// displaytask.component.ts 中修改displayAllProjects方法
displayAllProjects()
{
  this.service.getAllTasks().subscribe(data=>{
    // 先清空三个数组
    this.toDo = [];
    this.doing = [];
    this.done = [];
    // 按状态分组，按sort_order排序
    const sortedTasks = data.sort((a,b) => a.sort_order - b.sort_order);
    sortedTasks.forEach(t=>{
      if(t.status === 'todo') this.toDo.push(t.project_name);
      else if(t.status === 'doing') this.doing.push(t.project_name);
      else if(t.status === 'done') this.done.push(t.project_name);
    })
  })
}

如果不需要后端永久存储，只是想临时保留刷新前的状态，也可以直接从localStorage读取初始化数据。

步骤3：在drop事件中添加持久化逻辑 #

拖拽完成后立刻把最新的列表状态同步到存储，这里提供两种可选方案：

方案A：用localStorage临时存储（无需后端修改） #

// drop方法修改
drop(event: CdkDragDrop<string[]>) {
 if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
   transferArrayItem(event.previousContainer.data,
                   event.container.data,
                   event.previousIndex,
                    event.currentIndex);
  }
  // 持久化最新状态到localStorage
  const saveData = {
    toDo: this.toDo,
    doing: this.doing,
    done: this.done
  }
  localStorage.setItem('taskStatus', JSON.stringify(saveData));
}
// 同时修改ngOnInit，优先从localStorage读取数据
ngOnInit(): void {
  const localData = localStorage.getItem('taskStatus');
  if(localData) {
    const parseData = JSON.parse(localData);
    this.toDo = parseData.toDo || [];
    this.doing = parseData.doing || [];
    this.done = parseData.done || [];
  } else {
    this.displayAllProjects()
  }
}

方案B：同步到后端数据库（永久存储） #

你需要在TaskService中新增更新任务状态和排序的接口，拖拽完成后调用接口把最新的状态传给后端保存即可，下次加载就能拿到最新的状态。

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