Обмен строками данных между двумя таблицами в angular с использованием материала angular
Я реализовал образец углового приложения, в котором я взял всплывающий компонент.
В моем всплывающем компоненте я взял две таблицы, первая таблица содержит строки данных списка, а вторая таблица пуста.
Я реализовал функцию обмена между таблицами.
при нажатии кнопки Перейти ко второму столу на первой таблице выбранные строки должны быть перенесены во вторую таблицу.
И при нажатии кнопки Перейти к первой таблице на второй таблице выбранные строки должны быть перенесены в первую таблицу.
Но у меня возникает проблема при замене строк данных. Если я сделаю selectAll в первой таблице и нажму кнопку Перейти ко второму столу, строки будут переданы.
Но изначально после открытия всплывающего окна, если я просто выбираю 2 или 3 строки и передаю, выбранные строки передаются, но оставшиеся строки в первой таблице удаляются ...!
пожалуйста, войдите в мой пример приложения здесь
Может ли кто-нибудь сказать, что мне не хватает ...?
Ответы 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 }
];