Angular Material Drag and drop в таблице
У меня проблема с Angular Material: Мне нужна в моей таблице функция перетаскивания, но она не работает.
это мой код component.ts:
dropTable(event: CdkDragDrop <test[]>) {
moveItemInArray(this.childTest.data, event.previousIndex, event.currentIndex);
this.childTestTable.renderRows();
}
Ответы 2
Ваш список должен быть помечен cdkDropList и привязан к [cdkDropListData] = "data". Если вы хотите перетащить элемент из одного списка в другой, вы должны соединить их с помощью [cdkDropListConnectedTo] = "ids"
В component.ts попробуйте:
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex);
На самом деле обновление данных при использовании cdkDragDrop для таблиц материалов, к сожалению, немного шатко. Я создал рабочий poc, на который вы можете посмотреть: https://stackblitz.com/edit/table-drag-n-drop
Важно то, что данные таблицы нужно обновлять вручную, вот моя функция перетаскивания:
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
// updates moved data and table, but not dynamic if more dropzones
this.dataSource.data = clonedeep(this.dataSource.data);
this.dataSource2.data = clonedeep(this.dataSource2.data);
}
спасибо за вашу помощь, я попробовал ваш код, но у меня не работает
Тогда, я думаю, вы должны опубликовать полный пример того, что не работает, так как это работает в этом poc ?
Привет @LarsRødal, это работает, но мне нужно отслеживать исходный массив данных. С clonedeep это невозможно, я попытался создать в ngOnInit источник маттабличных данных с именем «initialData», но он также изменился после перестановки элементов.
Да, вам нужно сделать cloneDeep для повторного рендеринга списка, если этого не сделать, вы не получите правильные privouseIndex и currentIndex при следующем перетаскивании. К сожалению, я не знаю почему.
Вы можете избежать клонирования источников данных, явно обновив таблицы: this.table1.renderRows(); this.table2.renderRows();
Спасибо за помощь, у меня в мат-таблице cdkDropList и cdkDropListData. Я также добавил event.container.data, но не работает.