0

介绍

我有一个待办事项列表，它利用 Angular MaterialcdkDrag对cdkDropList. 将项目标记为“待办事项”或“已完成”，反之亦然。

问题

用户交互中有一定程度的细节，即页面刷新，这会导致项目不一定按照它们被拖动的顺序。

举个例子，一个用户被分配了 3 个任务：吃早餐，吃午餐，吃晚餐： 在此处输入图像描述

用户不喜欢该优先级并决定改为按此顺序处理他/她的饮食任务。拖放交互发生，待办事项列表最终确定为： 在此处输入图像描述

在页面刷新时，这就是问题开始的地方。它会回到原始状态：

吃早饭，吃午饭，吃晚饭

当它显然应该是：

吃晚饭，吃早饭，吃午饭

这一观察结果也适用于标记为已完成的项目。

我需要确认此交互的当前状态的缺失部分是什么。请注意，此实现基于How To Build an App With Drag and Drop With Angular

谢谢你的时间。

4

1 回答 1

3

您需要将“字符串”数组转换为“对象”数组

想象一下，您有一系列项目，例如

[{task:"eat breakfast",order:0},
 {task:"eat lunch",order:1},
 {task:"eat dinner",order:2}
]

在您的放置功能中，您需要重新计算属性顺序。使用典型的 drop 函数

drop(event: CdkDragDrop<any[]>) {
    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);
      //if transfer, recalculate the order of previous (the list from drag)
      event.previousContainer.data.forEach((x,index)=>{
          x.order=index
      })
    }
    //always, recalculate the order of the container (the list to drag)
      event.container.data.forEach((x,index)=>{
          x.order=index
      })
  }

然后你无论如何都需要保存数据（我认为你可以使用ngOnDestroy），当你收到数据时不要忘记按顺序排序

注意：在这个 SO中有一个使用 formArray 的 cdkDragList （仅用于排序）如果你想使用 FormArray 但它不是必需的，只有两个数组必须足够

于 2020-06-17T21:26:47.733 回答