Angular+Firebase任务拖拽列间移动时的视觉重复问题

问题现象 #

基于Angular+Firebase的看板项目中，用@angular/cdk/drag-drop实现任务列间拖拽时，Firebase数据已正确转移，但源列仍显示任务的视觉副本。当前拖拽逻辑步骤：

1. 调用this.store.collection(event.previousContainer.id).doc(item.id).delete()删除源列任务
2. 调用this.store.collection(event.container.id).add(item)添加到目标列
3. 调用transferArrayItem更新视图

尝试过Promise.all、Firestore事务，仍未解决视觉不一致问题。

核心原因 #

视图数据绑定的是Firestore的Observable实时流，手动调用transferArrayItem修改内存数组后，Firestore的订阅流可能还持有旧数据，加上Angular变更检测时机不匹配，导致源列残留旧任务的视觉副本。

解决方案 #

1. 依赖Firestore订阅自动更新视图，移除手动transferArrayItem #

因为列数据是从Firestore Observable获取的，只需要处理Firestore的数据变更，让实时订阅自动驱动视图更新，避免手动修改内存数组与后端数据的冲突。

2. 优化事务逻辑，确保原子性 #

使用Firestore事务保证任务删除和添加操作的原子性，同时等待事务完成，让视图通过订阅自然刷新。

3. 可选：保留任务原ID（推荐） #

默认add会生成新ID，若需要保留任务原有ID，改用set方法。

修改后的关键代码 #

优化后的drop方法 #

async drop(event: CdkDragDrop<Task[] | null>): Promise<void> {
  if (event.previousContainer === event.container) {
    return;
  }
  const item = event.previousContainer.data[event.previousIndex];
  try {
    // 等待事务执行完成，确保数据持久化
    await this.store.firestore.runTransaction(async (transaction) => {
      // 删除源列任务
      const sourceDocRef = this.store.collection(event.previousContainer.id).doc(item.id).ref;
      await transaction.delete(sourceDocRef);
      
      // 方式1：添加到目标列（生成新ID）
      // const targetColRef = this.store.collection(event.container.id).ref;
      // await transaction.set(targetColRef.doc(), item);

      // 方式2：保留原ID添加到目标列（推荐）
      const targetDocRef = this.store.collection(event.container.id).doc(item.id).ref;
      await transaction.set(targetDocRef, item);
    });
  } catch (error) {
    console.error('拖拽事务执行失败:', error);
    // 事务失败时回滚视觉状态
    if (event.previousContainer.data && event.container.data) {
      transferArrayItem(
        event.container.data,
        event.previousContainer.data,
        event.currentIndex,
        event.previousIndex
      );
    }
  }
}

确保getObservable正确映射文档ID #

如果你的getObservable方法没有把Firestore文档ID映射到Task的id字段，会导致删除操作失效，需确保：

function getObservable(collection: AngularFirestoreCollection<Task>): Observable<Task[]> {
  return collection.snapshotChanges().pipe(
    map(actions => actions.map(a => {
      const data = a.payload.doc.data() as Task;
      const id = a.payload.doc.id;
      return { id, ...data };
    }))
  );
}

额外优化点 #

• 拖拽过程中可添加加载状态，避免用户重复操作
• 确保userId过滤逻辑正确，避免跨用户任务显示问题

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