Removing selected items from a list of mats not working in angular 2 using angular material

Question

I performed a simple table in angular 2 using angular material. Added two methods: first, transferSelectedRows , which, when selecting rows from the table, drags the row data to the "Selected rows" section.

The second method is removeSelectedRows , where when you select the rows and click the Delete button, the selected rows must be removed the corresponding list items. But I can’t remove the items from the mat-select-list ...

Can anyone help me ...!

please refer to my example here. https://stackblitz.com/edit/angular-nwjqsj-au6ho8?file=index.html

Below is the result of my angular 2 example.

Answer 1

You can change your removeSelectedRows() to filter the selected items in the table:

 removeSelectedRows() { this.selection.selected.forEach(item => { this.selectedRows = this.selectedRows.filter(element => element !== item); }); }