angular - 角度 cdk 拖放 - 如果验证返回 false，是否有任何方法可以在放置时进行异步验证并恢复？

Question

当删除一个项目时，我希望能够执行一个异步调用（例如检查后端是否存在冲突、冲突等......），它返回真或假。如果为假，我想“反转”放置，以便该项目出现在原始数组中。

我在官方文档中找不到任何参考资料，因此对如何应对这一挑战的任何指针表示赞赏。

Answer 1

对于其他寻找此功能的人，这是一种方法。如果可以以某种方式告诉移动在恢复之前等待结果，那就太好了，但我不知道该怎么做。

try{
//Move the value first
transferArrayItem(event.previousContainer.data,
  event.container.data,
  event.previousIndex,
  event.currentIndex);

//Wait for the result and then roll back the change if required
this.openEdit(event.previousContainer.data[event.previousIndex]).subscribe((result:Updated) =>
  {

    if(result?.success !== 1){
      transferArrayItem(event.container.data,
        event.previousContainer.data,
        event.currentIndex,
        event.previousIndex);
    }

  });

}

Answer 2

按照@Jim 提出的想法，一个可能的解决方案可以简单地进行更改并异步检查操作状态，如果可以：完成，否则恢复更改，以下解决方案也可以使用changeDetection: ChangeDetectionStrategy.OnPush

transferArrayItem(
    event.previousContainer.data,
    event.container.data,
    event.previousIndex,
    event.currentIndex);

this.service.asyncItem(itemToUpdate).toPromise().catch(() => {
    transferArrayItem(
          event.container.data,
          event.previousContainer.data,
          event.currentIndex,
          event.previousIndex);

    this.cdr.detectChanges();
});