Angular中MatTable的dataSource新增数据后如何刷新表格显示新条目

MatTable的MatTableDataSource默认仅在data属性的引用发生变化时才会触发表格重渲染，你当前直接向FORMULARLIST数组内push元素的操作没有改变数组本身的引用，所以表格无法感知到数据更新，按以下步骤修改即可：

步骤1：调整弹窗组件返回新增数据 #

在你的PopupWindowComponent中注入MatDialogRef，用户提交新增表单后，将新生成的ContactListEntry对象通过close方法返回：

// PopupWindowComponent 中提交逻辑示例
constructor(private dialogRef: MatDialogRef<PopupWindowComponent>) {}

onSubmit() {
  const newEntry: ContactListEntry = {
    // 从表单中收集赋值的各项字段
  };
  this.dialogRef.close(newEntry);
}
// 若用户点取消关闭弹窗，直接调用this.dialogRef.close()不传值即可

步骤2：监听弹窗关闭事件，更新表格数据源 #

修改object.component.ts中的openDialogAdd方法，监听弹窗关闭回调，拿到新增数据后更新数据源：

// 先确保组件构造器中注入了你的数据服务
constructor(private dataService: DataService, private dialogService: MatDialog) {}

openDialogAdd() {
  const dialogRef = this.dialogService.open(PopupWindowComponent, { 
    minWidth: "700px", 
    minHeight: "400px"
  });

  dialogRef.afterClosed().subscribe((newEntry?: ContactListEntry) => {
    // 仅当用户提交了新增数据时执行更新
    if (!newEntry) return;
    // 调用服务存入新数据
    this.dataService.addEntryToList(newEntry);
    // 给dataSource.data赋值新数组引用，触发表格刷新
    this.dataSource.data = [...FORMULARLIST];
    // 可选：新增后自动跳转到第一页展示新条目
    this.dataSource.paginator?.firstPage();
  });
}

可选优化：多组件共享数据自动同步 #

如果你的项目中多个组件都会修改联系人列表，可以将服务中的列表改成RxJS响应式流，所有订阅该流的组件都会自动同步数据：

改造data-service.ts #

import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
  // 用BehaviorSubject存储列表数据，初始值可传入你原来的FORMULARLIST初始数据
  private formularListSub = new BehaviorSubject<ContactListEntry[]>([]);
  // 对外暴露只读的可观察流
  public formularList$ = this.formularListSub.asObservable();

  addEntryToList(entry: ContactListEntry) {
    const currentList = this.formularListSub.value;
    // 传入新数组引用触发流更新
    this.formularListSub.next([...currentList, entry]);
  }
}

改造object.component.ts的初始化逻辑 #

ngOnInit(): void {
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;
  // 订阅列表变化，自动更新表格数据
  this.dataService.formularList$.subscribe(list => {
    this.dataSource.data = list;
  });
}

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