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

Question

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

第二种方法是 removeSelectedRows 选择行并单击 Remove Selected Rows 按钮应删除相应的列表项。但我无法实现删除功能来拼接ma​​t-selection-list中的项目...

谁能帮帮我...！

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

下面显示的是我的示例 angular 2 应用程序的输出。

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

Answer 1

更新：

从 angular5.x 开始，你甚至可以用一个简单的数组来做到这一点。请参阅 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 = [];
}