在此處輸入影像描述
我正在嘗試將一個串列中的一行添加到另一個串列中。cdkDragDrop 適用于在同一個串列中移動一行,但是當我嘗試將一行從一個串列移動到另一個串列時,會創建一個我想避免的新索引。
參考上圖
uj5u.com熱心網友回復:
創建新索引是不可避免的。當你從一個陣列移動到另一個陣列時,它需要一個索引來知道專案的位置。
實際上,即使您在同一個串列(同一個陣列)中更改專案的位置,即使專案索引發生變化,受更改影響的所有其他專案也是如此,現在由于單個專案的更改,所以有更改了其他專案的索引( 1 / -1)。
todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];
done = ['Get up', 'Brush teeth', 'Take a shower', 'Check e-mail', 'Walk dog'];
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); // when change happens in same array (same list)
this.eventIndex = [event.previousIndex,event.currentIndex];
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex,
);
this.eventIndex = [event.previousIndex,event.currentIndex]; // when changes arrays (lists)
}
}
/** Index of the item when it was picked up. */
previousIndex: number;
/** Current index of the item. */
currentIndex: number;
/** Item that is being dropped. */
item: CdkDrag<I>;
/** Container in which the item was dropped. */
container: CdkDropList<T>;
/** Container from which the item was picked up. Can be the same as the `container`. */
https://stackblitz.com/edit/angular-mccx4a-b6etwg?file=src/app/cdk-drag-drop-connected-sorting-group-example.ts
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/495095.html
上一篇:Angular-從服務中的HttpClient獲取JSON資料無法正常作業
下一篇:角13https
