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

Question

Я реализовал пример углового приложения, в котором я взял всплывающий компонент.

В моем всплывающем компоненте я взял две таблицы, первая таблица содержит строки данных списка, а вторая таблица пуста.

Я реализовал функцию обмена между таблицами.

при нажатии кнопки Перейти ко второй таблице в первой таблице выбранные строки следует перенести во вторую таблицу.

И при нажатии кнопки Перейти к первой таблице на второй таблице выбранные строки должны быть перенесены в первую таблицу.

Но у меня возникает проблема при перестановкестроки данных. Если я сделаю selectAll в первой таблице и нажму на кнопку Перейти ко второй таблице , строки будут перенесены.

Но первоначально после открытия всплывающего окна, если я просто выберу2 или 3 строки и передача, выбранные строки переносятся, но оставшиеся строки в первой таблице удаляются .....!

pleДоступ к моему образцу приложения здесь

Может ли кто-нибудь, пожалуйста, скажите, что мне не хватает .....?

Answer 1

В вашей функции moveToSecondTable() ваша операция копирования данных основана на несуществующем свойстве isSelected, поэтому проверка isSelected === false завершается неудачно, поскольку undefined не равно false. Вы можете легко это исправить, используя менее строгое сравнение и просто проверяя правдивость, например isSelected == false или просто !isSelected:

this.dataSource = new MatTableDataSource<Element>(this.uncheckedData.filter(x => !x.isSelected));

Но основная причина проблемы заключается в том, что ваша модель данных, определенная в Element, не включает свойство isSelected. Лучшее решение - добавить свойство в модель и указать значение по умолчанию:

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  isSelected: boolean
}

const ELEMENT_DATA: Element[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', isSelected: false },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', isSelected: false },
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', isSelected: false },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be', isSelected: false },
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', isSelected: false }
];