Angular拖拽组件：从PostgreSQL加载数据后顺序不符，如何保持一致？

如果不想给每条数据单独新增排序字段，最简便的方案是用PostgreSQL的JSON字段存储拖拽后的ID顺序序列，具体实现如下：

1. 数据库表调整（仅需新增一个字段） #

在对应的数据表里新增一个JSON类型字段，比如sort_order，用来存储拖拽后所有项的ID顺序数组（格式示例：[3,1,2]）。PostgreSQL原生支持JSON类型，无需额外配置。

2. 拖拽完成时保存顺序 #

在Angular的cdkDropListDropped回调里，提取当前列表的ID顺序，再把这个数组更新到数据库的sort_order字段：

onDrop(event: CdkDragDrop<any[]>) {
  moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  // 提取当前排序的ID数组
  const sortedIds = this.items.map(item => item.id);
  // 调用API将sortedIds保存到数据库的sort_order字段
  this.dataService.updateSortOrder(sortedIds).subscribe();
}

3. 加载数据时按顺序重组列表 #

从数据库加载数据时，先获取所有列表项，再取出保存的sort_order数组，最后根据数组顺序重组前端列表：

loadItems() {
  this.dataService.getAllItems().subscribe(allItems => {
    this.dataService.getSortOrder().subscribe(sortedIds => {
      // 根据ID顺序重组列表
      this.items = sortedIds.map(id => allItems.find(item => item.id === id));
      // 处理排序数组中未包含的新增项，默认追加到列表末尾
      const unorderedItems = allItems.filter(item => !sortedIds.includes(item.id));
      this.items.push(...unorderedItems);
    });
  });
}

方案优势 #

• 无需给每条数据维护单独的排序索引，避免拖拽时批量更新多条数据的排序值
• 仅需新增单个JSON字段，表结构改动极小
• Postgres对JSON的查询、更新操作效率稳定

注意事项 #

• 如果列表属于某个父级资源（比如某篇文章的附件列表），可以将sort_order字段存到父级资源的表中，逻辑更合理
• 若存在新增列表项的场景，要处理未在排序数组中的项，避免数据丢失

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