Может ли Angular drag & drop работать с матовой таблицей с включенным пейджингом и сортировкой?

Я уже реализовал решение, в котором возможно перетаскивание между двумя мат-таблицами с массивами для источников данных.

В то время я использую код из Схемы материалов Angular. для функции drop, как показано ниже:

drop(event: CdkDragDrop<MyObject[]>) {
  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);
  }
}

Однако, когда были добавлены подкачка и сортировка, и я переключил свой источник данных на MatTableDatasource, функция перетаскивания перестала работать.

Вообще возможно ли, чтобы перетаскивание работало на мат-столе с включенным пейджингом и сортировкой?


angular drag sorting drop paging
person Michalis B.    schedule 26.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Оказалось, что перетаскивание действительно может работать на матовом столе с включенным пейджингом и сортировкой.

Короче говоря, тип события меняется на CdkDragDrop‹MatTableDataSource, any›, и вам нужно добавить еще .data, чтобы получить данные из event.container.data и event.previousContainer.data, поскольку они упакованы. внутри MatTableDataSource.

Мне пришлось изменить функцию drop следующим образом:

drop(event: CdkDragDrop<MatTableDataSource<MyObject>, any>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data.data, event.container.data.data, event.previousIndex, event.currentIndex);
    }
  }

Если у кого-то есть еще какие-то идеи, пожалуйста, поделитесь!

person Michalis B.    schedule 26.10.2020