反应性形式的工作很奇怪，呈斜滴cdk-重复的项目

Question

我有一个表格，用户可以将选定的IMG拖动并将其放在目标位置并将表格提交给后端。

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

问题：< / strong>

1. 将一项拖动并将其放入拖动位置时，该项目将被乘以 /重复 - （（阵列重复的对象）
2. 时）拖动项目移动回到其原始位置，再次重复（阵列中的对象重复）
3. 时，当点击提交表单时，它不仅显示了很多重复的项目

期望：

drag and drog oflag drag ofla并提交表格。

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-问题复制

由于我的方案有些不同，我找不到任何解决方案从中

Answer 1

最后，我自己修改了以下几乎没有修改，我自己解决了问题。

初始化formControlname喜欢myDivName：this.fb.Array（[]），

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

ins drop> drop（）方法>分配并传递formValue

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

工作演示

注意：我不确定修复的效率有多高，但会尽可能地优化它

。