反应形式与 Angular DropnDrop CDK 一起工作很奇怪 - 项目重复

Question

我有一个表单，用户可以将选定的 img 拖放到目标位置并将表单提交到后端。

源数据是对象数组（API），

问题：

1. 当拖动一个项目并将其放在拖动位置时，该项目会相乘/重复 - （数组中的对象重复）
2. 当拖动的项目移回其原始 position 时，它再次被复制（数组中的对象重复）
3. 当点击提交表单时，它不仅显示了很多重复的项目

期待：

仅拖放选定的项目并提交表单。

ngOnInit() {
    this.initTestForm();
}

ngAfterViewInit() { }

initTestForm() {
    this.myTestForm = this.fb.group({
        //  myDivName: new FormControl(this.containerData),
        myDivName: new FormControl(this.containerData),
    });
}
drop(event: CdkDragDrop<Item[]>) {
    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
    );

    console.log(
        'transferArrayItem',
        event.container.data[event.currentIndex]
    );
    this.addItem(event.container.data[event.currentIndex]);
}
}

get myDivName() {
    return this.myTestForm.get('myDivName') as FormArray;
}
addItem(item: any) {
    this.basket.push(item);
    this.myDivName.push(this.fb.control(item));
}
removeItem() {
    this.basket.pop();
    this.myDivName.removeAt(this.myDivName.length - 1);
}
savedata() {
    console.log(this.myTestForm);
}

stackblitz - 重现问题

由于我的场景有点不同，我无法从 SO 中找到任何解决方案

Answer 1

最后，我自己解决了我的问题，做了一些如下的修改。

像 myDivName 一样初始化formControlName myDivName: this.fb.array([]),

 get myDivName() {
    return <FormArray>this.myTestForm.get('myDivName');
  }

在drop()方法中分配并传递 formValue

const formArry = this.myDivName;
formArry.insert(0,this.fb.control(event.container.data));

工作演示

注意：我不确定修复的效率如何，但会尽可能优化它。

感谢所有至少查看我的问题的人