Angular 在多个列表之间拖放

Angular 在多个列表之间拖放,angular,typescript,drag-and-drop,angular-material,angular-cdk,Angular,Typescript,Drag And Drop,Angular Material,Angular Cdk,我有四个不同对象的列表(A、B、C、D) 有没有办法将一个名称与这些列表中的每一个关联起来?换句话说,列表A是A,B是B 我打算拖放一个对象,同时知道它来自哪个列表以及它去了哪里 我使用它来查找自动生成的列表值console.log(“FROM”+event.previousContainer.id) console.log(“TO”+event.container.id),问题是这些值​​有时不同,它们并不总是相同的,如果使用条件,它可能会停止工作 是否有一种方法可以从对象所在的列表和删除对象

我有四个不同对象的列表(A、B、C、D)

有没有办法将一个名称与这些列表中的每一个关联起来?换句话说,列表A是A,B是B

我打算拖放一个对象,同时知道它来自哪个列表以及它去了哪里

我使用它来查找自动生成的列表值
console.log(“FROM”+event.previousContainer.id)
console.log(“TO”+event.container.id)
,问题是这些值​​有时不同,它们并不总是相同的,如果使用条件,它可能会停止工作

是否有一种方法可以从对象所在的列表和删除对象所在的列表中指定或始终获取相同的名称

谢谢

.ts

  drop(event: CdkDragDrop<string[]>) {
    console.log("FROM" + event.previousContainer.id)
    console.log("TO" + event.container.id)
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }
drop(事件:CdkDragDrop){
console.log(“FROM”+event.previousContainer.id)
console.log(“TO”+event.container.id)
if(event.previousContainer==event.container){
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex
);
}否则{
转让协议(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
}
}

因为它是一个元素列表,当拖放元素时,将其添加到另一个列表中

实现所需的最简单方法是为列表中的每个元素添加一个键:

请记住:这不是最好的解决方案

例如:

A = [{
    name:"AA",
    belongTo: "A"
  },
  {
    name:"BB",
    belongTo: "A"
  },
  {
    name:"CC",
    belongTo: "A"
  },
  ];

  B = [{
    name:"RR",
    belongTo: "B"
  },
  {
    name:"PP",
    belongTo: "B"
  },
  {
    name:"QQ",
    belongTo: "B"
  },
  ];
HTML(列表A的div卡体):


{{nw.name}=>{{nw.belongTo}

因为它是一个元素列表,当拖放元素时,将其添加到另一个列表中

实现所需的最简单方法是为列表中的每个元素添加一个键:

请记住:这不是最好的解决方案

例如:

A = [{
    name:"AA",
    belongTo: "A"
  },
  {
    name:"BB",
    belongTo: "A"
  },
  {
    name:"CC",
    belongTo: "A"
  },
  ];

  B = [{
    name:"RR",
    belongTo: "B"
  },
  {
    name:"PP",
    belongTo: "B"
  },
  {
    name:"QQ",
    belongTo: "B"
  },
  ];
HTML(列表A的div卡体):


{{nw.name}=>{{nw.belongTo}

在您的
函数中调用此事件数据:

对于上一个容器:

event.previousContainer.element.nativeElement.id

对于当前容器:

event.container.element.nativeElement.id


然后在HTML中向列表元素添加一个ID,如下所示:


在您的
函数中调用此事件数据:

对于上一个容器:

event.previousContainer.element.nativeElement.id

对于当前容器:

event.container.element.nativeElement.id


然后在HTML中向列表元素添加一个ID,如下所示:


完美的解决方案!非常感谢你!!完美的解决方案!非常感谢你!!