卡住超过2小时的角CDK拖动 - 无法将项目放在位置

Question

当刚开始进入Angular CDK DragnDrop时，我正在努力完成我的任务。试图拖动图像项目并落入位置时，我得到了无法读取未定义的属性（读取长度'）。

不确定这是因为与Angular Dragndrop CDK的不同界面

  drop(event: CdkDragDrop<any>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data, 
        event.container.data,                              // getting undefined here
        event.previousIndex,
        event.currentIndex
      );

      console.log(
        'transferArrayItem',
        event.container.data.colorways
      );

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

是否事件。

我的stackblitz

Answer 1

在这里，您可以

/* Add initial empty data */
imgSource: Pokedex = {
  colorways: [],
  count: 0,
};

drop(event: CdkDragDrop<any>) {
...
else {
 transferArrayItem(
   event.previousContainer.data,
   event.container.data, //remove colorways, event.container.data?.colorways,
   event.previousIndex,
   event.currentIndex
 );
}

<!-- Left container -->
[cdkDropListData]="colorways" <!-- Wrong -->
[cdkDropListData]="colorways.colorways" <!-- Right -->

<!-- Right Container -->
[cdkDropListData]="imgSource" <!-- Wrong -->
[cdkDropListData]="imgSource?.colorways" <!-- Right -->

工作stackblitz

Answer 2

理解CDKDROPLIST的最佳方法是忘记CDKDROPLIST。我们需要简单地思考对象的两个数组

CDKDROPLIST只是一个接口，即更改数组元素的位置或将数组的一个元素移至另一个元素。我们可以想象两个简单的输入和三个按钮，第一个按钮互换一个数组中一个元素的位置，另一个按钮在另一个阵列中以及最后一个按钮互换两个阵列的元素

函数moveiteminArray和TransferararayItem只是JavaScript函数。我们可以看到定义 a>我们可以使用是否使用（*）

发出事件的$事件（CDKDroplistDropped）是 cdkdragdrop ，所以我们有

1. 容器，cdkdroplist，cdkdroplist 强>掉落 - 所以我们有
   event.container.data我们在[数据]或
   CDKDROPLIST
2. 先前查看器，关于CKDDROPLIST 的同上，我们从开始drag
3. currentIndex，该元素的索引（位置）在数组中
   event.container.data 其中 droped
4. 先前索引，元素的索引（位置）
   event.previouscontainer.data

so so，您的CDKDROPLIST的数据应为colorways.colorways和imgsource.colorways.colorways.colorways @sameer所说，您需要初始化OBJ imgsource

注意：在.html中使用.html，

<pre>
{{cdkDropTarget.data|json}}
</pre>

以查看“存储” CDKDROPLIST“目标”阵列， ”

（*）例如在要在一个数组中添加元素，在此另一个 cdkdroplist to cdkdroplist to cdkdroplist to cdkdroplist to cdkdroplist “数据”是一个对象的CDKDROPLIST