Как сделать заказ Угловая таблица материалов?

Question

Цель: Создать таблицу, используя угловой материал, который можно изменить с помощью углового перетаскивания.

Ожидаемое поведение : таблица должна изменить порядок при перетаскивании

Текущее поведение : строки можно перетаскивать, и порядок основного источника данных изменяется, но при удалении строки она возвращается к своей исходной позиции в таблице.

См. Этот пример:

https://stackblitz.com/edit/drag-drop-reorder-mattable

Как это можно исправить / реализовать?

(Кроме того, я не уверен, почему он так плохо оформлен в Stackblitz. Любое понимание там также будет оценено)

Редактировать: Я нашел супер-хакерский способ заставить строки рендериться снова с правильным порядком, но нет способа, которым это должно быть реализовано. Я просто поставил t.renderRows(), чтобы он выполнялся после обработчика события удаления. Смотрите полную строку ниже

<mat-table #t
  cdkDropList
  (cdkDropListDropped)="onListDrop($event); t.renderRows()" 
  [dataSource]="dataSource"
  class="mat-elevation-z8">
  ...
</mat-table>

РЕДАКТИРОВАТЬ 2: Я сделал простой рефакторинг для использования rxjs, и первое изменение порядка перетаскивания для каждого элемента прекрасно работает. Но когда я пытаюсь переместить элемент, который уже был перемещен один раз, я не получаю ожидаемого поведения. Приложение Stackblitz обновлено.

Answer 1

Вы столкнулись с проблемой angular / material2 # 14056"cdkDropList: event.previousIndex не обновляется при втором движении". Обходной путь глубокого клонирования источника данных подробно описан в проблеме и его комментариях.

Взгляните здесь , где я играю с вашим демо после небольшого изменения в журнале консоли (console.log(`Moving item[${event.previousIndex}] "${this.items[event.previousIndex]}" to index ${event.currentIndex}`))

Я перетаскиваю «Элемент 0» из индекса 0 в индекс 3. Элемент с индексом 0 перемещается в индекс 3. ✔️
Я перетаскиваю «Элемент 0» из индекса 3 в индекс 1. Элемент с индексом 0 перемещается в индекс 1. ✖️
Я перетаскиваю «Элемент 0» из индекса 3 в индекс 2. Элемент с индексом 0 перемещается в индекс 2. ✖️

event.previousIndex по ошибке остается неизменным для строки после ее перемещения в другой индекс.

Answer 2

Как вы упомянули в своих изменениях, вам нужно вызывать renderRows() каждый раз, когда вы изменяете источник данных. Это даже упоминается в документации углового материала здесь .

Рендеринг строк на основе последнего набора данных таблицы, который был либо предоставляется непосредственно в качестве входных данных или извлекается через Observable поток (напрямую или из источника данных). Проверяет различия в данные с момента последнего сравнения, чтобы выполнить только необходимые изменения (добавить / удалить / переместить строки).

Если источником данных таблицы является DataSource или Observable, это будет вызывается автоматически каждый раз, когда предоставленный наблюдаемый поток испускает новый массив данных. В противном случае, если ваши данные являются массивом, эта функция будет необходимо вызвать для внесения каких-либо изменений.

То, что вы можете сделать, чтобы обходить вызов renderRows() каждый раз, - это преобразовать ваш источник данных в Observable и выдать новое значение в вашей функции onListDrop(), чтобы таблица автоматически обновлялась при каждом перетаскивании строки.