首页 > 解决方案 > 如何在两个不同的表之间存储一行的拖动选项元素

问题描述

我有两个tables由不同的 ngFor 循环生成的不同名称。我曾经在不同的列表cdkDrag之间拖动它们。这有效,但我的问题是当我在下拉列表中设置选项并将其拖动到另一个列表时,它消失了,如下所示图片

下面我将选项从奥迪更新为萨博(这里没问题)

在此处输入图像描述

当我尝试从Done具有新Saab选项的列表中拖动该行到ToDo列表时,所选选项在下图中消失 在此处输入图像描述

下面是我的 stackblitz 示例。如果你能帮助我,我会很高兴

https://stackblitz.com/edit/angular-gbls7d?file=src/app/cdk-drag-drop-connected-sorting-example.html

标签: angularangular-materialangular-cdk

解决方案


您需要保存选定的选项。例如,向您的对象添加一个属性以存储选项,然后从选择中绑定到此选项(示例中的属性名称为“已选择”):

<select id="cars" [(ngModel)]="feed.selected">

ts 列表:添加到每个对象(:

 {name:"Example",num:2,char:"4",length:"5",difficulty:"easy", selected
: null},
{name:"Example1",num:2,char:"4",length:"5",difficulty:"easy", selected
: null}
//etc

当您循环提要对象时,它会将每个相应的选择绑定到当前对象中的该属性。

StackBlitz 示例基于您的。


推荐阅读