Столбцы перетаскивания таблицы материалов Angular не обновляют строки

Есть ли способ обновить источник данных (строки) таблицы Angular Material в соответствии с изменениями, внесенными путем перетаскивания в столбцы?

У меня есть событие dropListedDrop, которое обновляет столбцы:

dropListDropped(event: CdkDropList, index: number) {
  if (event) {
    moveItemInArray(this.headers, this.previousIndex, index);
    this.setDisplayedColumns();
  }
}

Но данные в dataSource не изменяются автоматически после завершения действия перетаскивания.

Пример здесь: StackBlitz

corry 12.07.2019 источник

Ответы (2)

arrow_upward
2
arrow_downward

dropListDropped(event: CdkDropList, index: number) {
  if (event) {
    moveItemInArray(this.headers, this.previousIndex, index);
    this.headers = [...this.headers];
  }
}

демонстрация онлайн ЗДЕСЬ (это решение работает, даже если у вас есть Угловой трубчатый фильтр)

Stéphane GRILLON 21.11.2019

comment

Именно то, что я хочу! Спасибо :) - Smilefounder; 18.10.2020

arrow_upward
3
arrow_downward

Здесь упоминается эта таблица материалов Angular не обновляется автоматически для оптимизации производительности. Чтобы обновить таблицу, вы просто вызываете renderRows() в таблице.

Вы можете получить доступ к этой таблице @ViewChild(MatTable) table: MatTable<any>;, а затем вызвать table.renderRows();

Ashley 12.07.2019

comment