Angular中通过模态弹窗删除表格行的实现问题

问题根源 #

1. 删除组件逻辑错误：DeleteUserFormComponent 的 deleteRow 方法试图对单个用户对象调用数组方法 splice，完全无效；且未关闭弹窗、未向父组件传递删除确认信号。
2. 父组件删除逻辑错误：StartComponent 中 deleteUser 的 onClose 订阅里，错误沿用了编辑功能的赋值逻辑，而非移除数组元素。
3. 弹窗配置错误：打开删除弹窗时，modalClass 传了用户数据对象，而非合法的样式类名。

修正步骤 #

1. 修复 DeleteUserFormComponent

删除无用的表单代码，简化删除确认逻辑，点击确认时关闭弹窗并返回确认信号：

delete-user-form.component.ts

import { Component } from '@angular/core';
import { MdbModalRef } from 'mdb-angular-ui-kit/modal';

@Component({
  selector: 'app-delete-user-form',
  templateUrl: './delete-user-form.component.html',
  styleUrls: ['./delete-user-form.component.scss']
})
export class DeleteUserFormComponent {
  data: any;

  constructor(public modalRefDelete: MdbModalRef<DeleteUserFormComponent>) { }

  deleteRow() {
    // 返回true表示确认删除
    this.modalRefDelete.close(true);
  }

  close() {
    this.modalRefDelete.close();
  }
}

delete-user-form.component.html
把确认按钮的点击事件改成无参数的 deleteRow()：

<!-- Delete user starts -->
<div id="delete-employee">
    <div class="modal-header evonik white-text">
        <h5 class="modal-title text-white">Delete Employee Details</h5>
        <button type="button" class="close pull-right" aria-label="Close" (click)="close()"><span aria-hidden="true" style="color: #000000;">×</span></button>
    </div>
  
    <div class="modal-body m-0 p-50">
        <p>Are you sure you would like to remove this employee?</p>
    </div>
    
    <div class="modal-footer mt-1">
        <button mdbRipple type="button" class="btn btn-primary" (click)="deleteRow()">Confirm</button>
        <button mdbRipple type="button" class="btn btn-outline-primary" (click)="close()">Cancel</button>
    </div>
</div>
<!-- Delete user ends -->

2. 修复 StartComponent 的删除逻辑

修正弹窗配置和删除处理逻辑：

start.component.ts
修改 deleteUser 方法：

deleteUser(data: any, index: number) {
  this.selectedIndex = index;
  this.modalRefDelete = this.modalService.open(DeleteUserFormComponent, {
    modalClass: '', // 传合法的样式类，比如'modal-sm'，不要传data
    data: {data}
  });

  this.modalRefDelete.onClose.subscribe(res => {
    if(res) { // 如果返回true，说明确认删除
      // 移除对应索引的元素，同时创建新数组触发变更检测
      this.listData = this.listData.filter((_, i) => i !== this.selectedIndex);
      this.datatable.search(''); // 刷新表格
    }
  });
}

验证效果 #

现在点击删除按钮打开弹窗，确认后表格对应行会被移除，同时弹窗正常关闭。

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