Угловой материал Перетащите в таблицу

Question

У меня проблема с угловым материалом: Мне нужна функция перетаскивания в моей таблице, но она не работает.

это мой код component.ts:

dropTable(event: CdkDragDrop <test[]>) {
  moveItemInArray(this.childTest.data, event.previousIndex, event.currentIndex);
  this.childTestTable.renderRows();
}

Answer 1

На самом деле обновление данных при использовании cdkDragDrop в таблицах материалов, к сожалению, немного проблематично. Я создал рабочий документ, на который вы можете посмотреть: 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);

}

Answer 2

Ваш список должен быть отмечен cdkDropList и привязкой к [cdkDropListData]="data". Если вы хотите перетащить элемент из одного списка в другой, вы должны связать его с [cdkDropListConnectedTo]="ids"

В component.ts попробуйте:

moveItemInArray(
  event.container.data,
  event.previousIndex,
  event.currentIndex);