angular - 角度拖放：输入谓词可以验证项目在哪个索引处被删除？

Question

我正在使用 Angular DragDropModule，我想将一个对象从一个列表拖到另一个。这工作得很好，但我只需要在到达列表的第一个或最后一个索引处删除我的对象。这里的例子显示了一个带有输入谓词的数字列表，它只允许精灵数字，但我想知道如何解决我的问题。

我希望我足够清楚。如果您知道使用谓词解决我的问题的另一种方法，那也很好。

谢谢！

Answer 1

我想我只是找到了解决问题的方法。事件 cdkDropListDropped 提供了一个“currentIndex”属性，表示项目刚刚被丢弃的索引，因此在“drop”函数中，我只是在传输项目之前添加了下面的验证：

drop(event: CdkDragDrop<Object[]>) {
   if (event.currentIndex === 0 || event.currentIndex === arrivalList.length) {
       ...
       ...
       ...
    }
}

我希望我解释得很好，它会帮助别人。

Answer 2

有cdkDropListEnterPredicate用于查找您的位置的谓词的属性。

在您的 Html 删除元素中：

[cdkDropListEnterPredicate]="evenPredicate"

在您的 Ts 文件中：

evenPredicate(item: CdkDrag<number>) {
  return item.data === 1|| item.data === 6;
}

在这里，数据是我们数组的索引。item.data === 1是第一个位置，而item.data === 6是给定数组的最后一个位置。

参考：样品 让我知道它是否工作正常。

谢谢。