Unable to drop Angular Material Drop Item

Question

I am attempting to us Angular Material cdkDragDrop.

The list is attempting to be populated from a nested object. I am able to display the lists, but when attempting to move an item, it does not appear in the 'Added Details' list

Code: https://stackblitz.com/edit/angular-awxclk?file=src%2Fapp%2Fcdk-drag-drop-connected-sorting-example.html

Answer 1

In your code, you are using moveItemInArray and transferArrayItem which expects (as the name suggests) first parameter to be an array. In your case you are pointing it to an object, so the method throws internally.

What you want to do is to use actual collections in as the [cdkDropListData] in both containers. Then, you iterate those same collection in the *ngFor directive.

So, in your constructor / onInit you transform the object into array and use that array as [cdkDropListData]. Then, if you want to, you can transform the array back into object and update it at the end of your drop method.