当使用ngFor循环渲染JSON数组时,应确保在每个可拖动项目上添加唯一的ID。然后,必须在拖放服务中使用此ID来查找和移动项目。
以下是一个示例:
在组件中:
// 定义JSON数组
public items = [
{ id: '1', name: 'Item 1' },
{ id: '2', name: 'Item 2' },
{ id: '3', name: 'Item 3' }
];
// 定义拖放函数
public onItemDrop(event: CdkDragDrop) {
// 获取被拖动的项目位置和拖动后的位置
const prevIndex = this.items.findIndex((item) => item.id === event.item.data.id);
const currentIndex = event.currentIndex;
// 移动元素
moveItemInArray(this.items, prevIndex, currentIndex);
}
在模板中:
-
{{ item.name }}
在上面的示例中,我们将id
添加到JSON数组中的每个项目中,并使用onItemDrop
函数和拖放服务中的moveItemInArray
函数来处理项目的移动。在模板中,我们使用ngFor循环渲染JSON数组,并使用cdkDrag指令和cdkDragData属性将每个项目变为可拖动项。