这个问题通常是由于使用了Angular Material的CDK拖放库中的错误导致的。解决此问题的一种方法是使用CDK DropList中提供的data参数来传递所需的数据。

以下是一个示例代码，演示如何使用data参数来解决此问题：

HTML模板部分：

组件部分：

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

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { items = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, { id: 4, name: 'Item 4' }, { id: 5, name: 'Item 5' } ];

onDrop(event: CdkDragDrop) { const draggedIndex = event.previousIndex; const droppedIndex = event.currentIndex; const draggedItem = event.item.data;

console.log('draggedIndex', draggedIndex);
console.log('droppedIndex', droppedIndex);
console.log('draggedItem', draggedItem);

moveItemInArray(this.items, draggedIndex, droppedIndex);

} }

在这个示例中，我们在CDK拖动事件中使用了data属性来传递所需的数据。然后，在onDrop方法中获取拖动项的数据，并使用它执行任何必要的操作。这样就能够解决Angular Material拖放事件返回错误索引和移动错误项的问题。