使用角度材质从角度2中删除mat-selection-list中的选定行

Question

我使用角度材料在角度2中实现了一个简单的表。实现了两个方法，首先是 transferSelectedRows ，在从表中选择行时将行数据推送到Selected Rows部分。

第二种方法是 removeSelectedRows 在选择行并单击删除所选行按钮时，应该删除相应的列表项。但是我无法实现删除功能来拼接来自 mat-selection-list ...

的项目

任何人都可以帮帮我......！

请在此处访问我的示例示例.. https://stackblitz.com/edit/angular-nwjqsj-au6ho8?file=app%2Faccount.component.scss

下面显示的是我的示例angular 2 app的输出。

我的终端和控制台出现以下错误。

Answer 1

<强>已更新：

即使是angular5，你也可以使用简单的数组。有关实例，请参阅here。

首先将您的mat-selection-list绑定到html文件中的数组selectedRowsChecked。

<mat-selection-list #rows [(ngModel)]="selectedRowsChecked">
    <mat-list-option *ngFor="let i of selectedRows" [value]="i">
        {{i.position}}-{{i.name}}-{{i.weight}}-{{i.symbol}}
    </mat-list-option>
</mat-selection-list>

然后在您的组件中定义该数组

selectedRowsChecked = [];

然后在removeSelectedRows方法中使用此功能。

removeSelectedRows() {
    this.selectedRowsChecked.forEach(item => {
      let index: number = this.selectedRows.findIndex(d => d === item);
      if(index > -1) {
         this.selectedRows.splice(index, 1);
      }
    });
    this.selectedRowsChecked = [];
}