Reputation: 1773
I have implemented a sample angular app where i have taken a popup component.
In my popup component i have taken two tables ,the first table contains the list data rows and the second table is empty.
I have implemented swapping functionality between the tables.
on clicking the Move to second table button on first table , the selected rows should be transferred to the second table.
And on clicking the Move to first table button on second table, the selected rows should be transferred to the first table.
But I am getting an issue during swapping the data rows.If I make a selectAll in the first table and click on the button Move to second table, the rows are being tansferred.
But initially after opening the popup if I just select 2 or 3 rows and transfer, the selected rows are being transferred but the remaining rows in the first table are getting deleted.....!
please access my sample app here
Can any body please tell what is that i am missing .....?
Upvotes: 2
Views: 1066
Reputation: 17918
In your moveToSecondTable()
function, your data copy operation relies on the isSelected
property which doesn't exist, so the isSelected === false
check fails because undefined
is not equal to false
. You could easily fix that by using a less strict comparison and just checking for truthiness such as isSelected == false
or just !isSelected
:
this.dataSource = new MatTableDataSource<Element>(this.uncheckedData.filter(x => !x.isSelected));
But the root cause of the problem is that your data model defined in Element
does not include an isSelected
property. The best fix is to add the property to the model and provide a default value:
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 }
];
Upvotes: 1