Angular перетаскивание для массива объекта

Question

import { Component, OnInit } from '@angular/core';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';


@Component({
  selector: 'kt-manage-menu',
  templateUrl: './manage-menu.component.html',
  styleUrls: ['./manage-menu.component.scss']
})
export class ManageMenuComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  movies = [
    {
      id:1, title:'Beauty and the best'
    },
    {
      id:2, title:'Spider Man'
    }
   ]

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  }
}

Пример здесь: https://stackblitz.com/angular/omybvaablxk?file=src%2Fapp%2Fcdk-drag-drop-custom-placeholder-example.ts

** Как я могу создать Angular перетаскивание для массива объектов, пожалуйста? Я пытаюсь это по массиву строк, только это работает, но по массиву объектов нет .. Я пытаюсь метод интерфейса, но это не работает также

**

Answer 1

В вашем примере cdk-drag-drop-custom-placeholder-*. 1003 *, просто измените следующее

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>
    <div class="example-custom-placeholder" *cdkDragPlaceholder></div>

    {{movie.title}}       -------------->  Do this instead of movie, this will iterate over the object titles.

  </div>
</div>