Wrap rows from one table to another in angular 2 using angular material

Question

I made a simple table in angular 2 using angular material ... I took two match tables in which the selected rows from the first table are transferred to the second table when you click Move To Table 2 and vice versa, click "Move to table 1"

But when I select and click "Move to table 2", the row from my first table gets spliced ​​and wrapped, but, like for the second row, I again get the previously wrapped row in the second table.

Example example

Below is my conclusion.

Initially, when I wrap the first row, its receipt is spliced ​​and moved to the second table.

But when I wrap the second row, the previously moved row is again added to the second table.

Answer 1

This is because you are not clearing the selection,

All you have to do is clear the selection after the transfer from one table to another has been completed.

Add this.selection.clear(); to the end of moveToTableTwo() , for example:

 moveToTableTwo(){ ... this.selection.clear(); } 

Answer 2

Deselecting did not allow me to transfer the marked items back to table 1. Instead, it worked:

 moveToTableTwo(){ ... this.selection.deselect; }