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-example.html中，只需更改以下内容

<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>

对象数组的角度拖放

1 个答案: