Angular 4/TypeScript：如何删除选中的多行数据

我来帮你搞定这个需求，核心是先跟踪哪些行被选中，再通过正确的逻辑用splice（或过滤）删除对应项，下面分步骤给你讲清楚：

步骤1：模板中绑定复选框选中状态 #

在你的*ngFor循环里，给每个复选框添加事件监听，用来记录选中的行索引或者直接记录选中的对象（推荐后者，避免数组排序/变更导致的索引混乱）。

方式一：跟踪选中的索引 #

修改你的HTML代码，给复选框添加(change)事件：

<ng-container *ngFor="let reasoncode of displayReasonCodes$ | async; let i = index">
  <tr class="row-break">
    <td>
      <input 
        type="checkbox" 
        (change)="onCheckboxToggle(i, $event.target.checked)"
      >
    </td>
    <!-- 其他列内容 -->
  </tr>
</ng-container>

方式二：跟踪选中的对象（更稳妥） #

如果你的reasoncode有唯一标识（比如id），直接跟踪选中对象更可靠：

<ng-container *ngFor="let reasoncode of displayReasonCodes$ | async; let i = index">
  <tr class="row-break">
    <td>
      <input 
        type="checkbox" 
        (change)="onItemToggle(reasoncode, $event.target.checked)"
      >
    </td>
    <!-- 其他列内容 -->
  </tr>
</ng-container>

步骤2：组件中实现选中跟踪与删除逻辑 #

首先要注意：displayReasonCodes$是Observable，我们需要维护一个本地数组副本，方便修改后更新Observable。

先处理Observable的本地副本 #

假设你的displayReasonCodes$来自服务，先在组件里订阅它拿到本地数组：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

// 先定义ReasonCode类型（根据你的实际结构调整）
interface ReasonCode {
  id: number;
  // 其他属性比如name、code等
}

@Component({
  // 组件元数据（比如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  displayReasonCodes$: Observable<ReasonCode[]>;
  reasonCodes: ReasonCode[] = []; // 本地数组副本，用来修改
  selectedIndexes: number[] = []; // 方式一：存选中的索引
  selectedItems: ReasonCode[] = []; // 方式二：存选中的对象

  ngOnInit(): void {
    // 订阅Observable，同步本地数组
    this.displayReasonCodes$.subscribe(data => {
      this.reasonCodes = [...data];
    });
  }
}

方式一：通过索引删除 #

先实现复选框切换的事件处理：

onCheckboxToggle(index: number, isChecked: boolean): void {
  if (isChecked) {
    this.selectedIndexes.push(index);
  } else {
    // 移除已取消选中的索引
    const removeIdx = this.selectedIndexes.findIndex(i => i === index);
    if (removeIdx !== -1) {
      this.selectedIndexes.splice(removeIdx, 1);
    }
  }
}

然后实现删除函数，必须倒序删除（因为splice会改变数组长度，正序删除会导致后续索引偏移）：

deleteSelectedRows(): void {
  // 把选中的索引按降序排序
  this.selectedIndexes.sort((a, b) => b - a);
  
  // 逐个删除对应行
  this.selectedIndexes.forEach(idx => {
    this.reasonCodes.splice(idx, 1);
  });
  
  // 清空选中索引数组
  this.selectedIndexes = [];
  
  // 更新Observable（如果用的是BehaviorSubject，比如从服务来的）
  // this.reasonCodeService.reasonCodes$.next([...this.reasonCodes]);
}

方式二：通过对象过滤删除 #

先实现复选框切换的事件处理：

onItemToggle(item: ReasonCode, isChecked: boolean): void {
  if (isChecked) {
    this.selectedItems.push(item);
  } else {
    // 通过唯一id移除已取消选中的对象
    const removeIdx = this.selectedItems.findIndex(i => i.id === item.id);
    if (removeIdx !== -1) {
      this.selectedItems.splice(removeIdx, 1);
    }
  }
}

然后实现删除函数，这种方式不需要考虑索引顺序，直接过滤数组即可：

deleteSelectedRows(): void {
  // 过滤掉选中的对象
  this.reasonCodes = this.reasonCodes.filter(item => 
    !this.selectedItems.some(selected => selected.id === item.id)
  );
  
  // 清空选中对象数组
  this.selectedItems = [];
  
  // 更新Observable
  // this.reasonCodeService.reasonCodes$.next([...this.reasonCodes]);
}

步骤3：添加删除按钮 #

在模板里加一个按钮，绑定删除函数：

<button (click)="deleteSelectedRows()">删除选中行</button>

这样点击按钮就能删除所有选中的行了。

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