Angular cdk 拖放。如何将元素拖入新添加元素的嵌套元素中

Question

我有2个容器。我可以将一个元素从第一个容器拖动到第二个容器的嵌套元素。但是当我清除一个元素时，即在其位置创建一个新元素时，我无法将该元素拖到新元素的嵌套元素中。

如果有人可以建议如何做到这一点。

Stackblitz：https://stackblitz.com/edit/angular-drag-and-drop-child-groups-lqwux1

Answer 1

我们可以使用

transferArrayItem

将元素推送到不存在的列表并删除元素，我认为其原因是列表中的数据和 cdk 内部状态！

请注意，数据和拖放状态不同步，不要尝试通过属性维护状态，只需访问所有拖放并在触发保存时获取数据即可。

removeItem(item: any) {
    const dataClone = [...this.dnd?.data];
    if (dataClone.length) {
      dataClone.forEach((item: any, i: number) => {
        transferArrayItem(this.dnd.data, [], 0, 0);
      });
    }
  }

堆栈闪电战