Angular确认删除弹窗操作后MatTable数据未自动更新问题

表格不自动更新是两个逻辑错误导致的：

1. 你在表格组件构造函数中注入DeleteCarComponent的写法完全无效。Angular的动态弹窗组件是由MatDialog服务独立创建实例的，你通过构造函数注入拿到的是一个和弹窗完全无关的全新组件实例，删除逻辑和当前弹窗、表格实例没有任何关联。
2. 原有删除成功的回调逻辑只弹出了提示条，没有对表格绑定的dataSource数据源做任何修改，Angular不会自动感知后端的数据变更，自然不会刷新视图。

不要把删除业务逻辑写在弹窗组件里，弹窗只负责返回用户的确认结果，删除操作和后续数据更新逻辑统一放在表格组件中处理，修改步骤如下：

• 精简删除弹窗组件，只保留确认交互逻辑，移除删除相关的业务代码
• 删除表格组件构造函数里对DeleteCarComponent的无效注入
• 删除请求成功后，直接更新表格的数据源触发视图刷新，不需要整页刷新

修正后的删除弹窗组件 delete-car.component.ts #

import { Component} from '@angular/core';

@Component({
  selector: 'app-delete-car',
  templateUrl: './delete-car.component.html',
  styleUrls: ['./delete-car.component.scss']
})
export class DeleteCarComponent {
  // 该组件仅承担弹窗确认交互，不处理业务逻辑
  constructor() { }
}

弹窗模板文件delete-car.component.html不需要修改，保持原有代码即可。

修正后的表格组件 car-list.component.ts #

import { Component, OnInit,  ViewChild } from '@angular/core';
import { MatPaginator} from '@angular/material/paginator';
import {  CarService } from 'src/app/services/car.service';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';
import { Car } from 'src/app/types';
import { MatDialog } from '@angular/material/dialog';
import { DeleteCarComponent } from '../delete-car/delete-car.component';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-car-list',
  templateUrl: './car-list.component.html',
  styleUrls: ['./car-list.component.scss']
})

export class CarListComponent implements OnInit{
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  allCars: Car[];
  columnsToDisplay = ['carplate', 'ownername', 'actions'];
  dataSource: MatTableDataSource<Car>;

  // 移除对DeleteCarComponent的无效注入
  constructor(private carService: CarService, public dialog: MatDialog, private _snackBar: MatSnackBar) { }

  ngOnInit(){
      this.loadCarList();
  }

  // 抽离列表加载逻辑，需要刷新时可直接调用
  loadCarList() {
    this.carService.allCars().subscribe(data => {
      this.allCars=data.sort((a: { car_plate: string; }, b: { car_plate: any; }) => a.car_plate.localeCompare(b.car_plate));
      this.dataSource = new MatTableDataSource(this.allCars);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    });
  }

  filterData($event: any) {
    this.dataSource.filter = $event.target.value;
  }

  openDeleteConfirmation(id: string) {
      const dialogRef = this.dialog.open(DeleteCarComponent);
      
      dialogRef.afterClosed().subscribe(response => {
        if(response == 'delete') {
          this.carService.deleteCar(id).subscribe(() => {
            this._snackBar.open("Record deleted successfuly");
            // 两种更新方式二选一即可
            // 方式1：本地过滤移除已删除项，无需额外请求，交互响应更快
            this.dataSource.data = this.dataSource.data.filter(item => item.id !== id);
            // 方式2：如果需要保证前端数据和后端完全一致，删除后重新拉取全量列表
            // this.loadCarList();
          }, () => {
            this._snackBar.open("Oops, something went wrong :(");
          });
        }
      })
  }
}

注意：如果选择本地过滤的更新方式，请将过滤条件里的item.id替换为你Car类型中实际的主键字段名，保证能正确匹配到要删除的条目。

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