Angular 2中如何实现mat-selection-list选中行删除功能？

别担心，我来帮你搞定这个删除选中行的逻辑！咱们一步步来拆解实现思路：

第一步：模板层绑定数据与选中状态 #

首先确保你的mat-selection-list正确绑定了已选行数据，并且能捕获用户选中的项。假设你用selectedRows数组存储“已选行”区域的数据，模板可以这么写：

<!-- 已选行区域的mat-selection-list -->
<mat-selection-list #selectedRowList [(ngModel)]="selectedToDelete">
  <mat-list-option *ngFor="let row of selectedRows" [value]="row">
    <!-- 替换成你实际需要展示的行数据字段，比如row.id、row.name -->
    {{ row.name }} (ID: {{ row.id }})
  </mat-list-option>
</mat-selection-list>

<!-- 删除按钮 -->
<button mat-raised-button color="warn" (click)="removeSelectedRows()">删除选中行</button>

这里的selectedToDelete会自动存储用户在列表中选中的所有项。

第二步：实现removeSelectedRows方法 #

在组件类里，你需要定义两个核心数组，然后编写删除逻辑：

// 存储“已选行”区域的数据
selectedRows: any[] = [];
// 存储用户选中的待删除项
selectedToDelete: any[] = [];

// 你已经实现的transferSelectedRows方法
transferSelectedRows(selectedTableRows: any[]) {
  // 把表格选中行追加到已选行数组（注意去重，避免重复添加）
  selectedTableRows.forEach(row => {
    if (!this.selectedRows.some(item => item.id === row.id)) {
      this.selectedRows.push(row);
    }
  });
}

// 现在实现删除方法
removeSelectedRows() {
  // 如果是对象数据，建议用唯一ID判断匹配（避免对象引用不一致导致的匹配失败）
  this.selectedRows = this.selectedRows.filter(row => 
    !this.selectedToDelete.some(deleteRow => deleteRow.id === row.id)
  );
  // 清空选中状态，避免下次删除时残留选中项
  this.selectedToDelete = [];
}

关键注意事项 #

• 如果你的行数据是简单类型（比如字符串、数字），直接用!this.selectedToDelete.includes(row)就能完成过滤；如果是对象，必须用唯一标识（比如id）来判断是否为同一行数据。
• 确保已经在模块中导入了MatListModule，否则mat-selection-list无法正常渲染。

这样点击“删除选中行”按钮后，就能精准移除用户选中的列表项啦！

内容的提问来源于stack exchange，提问作者Heena