Angular Material：无需刷新表格添加新行问题求助

嗨，我看你遇到了添加新数据后表格旧数据丢失的问题，帮你分析下代码里的问题点，然后给出具体的修复方案：

问题根源 #

你的核心问题出在数据源更新的逻辑上：

• 父组件IssueDataComponent的updatingDataSource方法直接用弹窗返回的result创建新的MatTableDataSource，但如果result只是单条新数据（而非包含旧数据+新数据的完整列表），就会直接覆盖掉原有所有数据。
• 弹窗组件EditIssueDataComponent在添加完数据后，没有把更新后的完整列表返回给父组件，导致父组件拿到的不是完整数据集。

另外还发现两个小细节问题：

• 服务类里的方法名是UpdateStatus，但组件里调用的是updateIssueData，存在拼写不一致的风险
• 弹窗组件构造函数里的MatDialogRef泛型写错了（写成了DefineCalenderComponent，应该是EditIssueDataComponent）

修复方案 #

方案一：返回完整列表更新数据源 #

1. 修改弹窗组件，返回更新后的完整列表

在edit-issue-data.component.ts的addStatus方法中，添加完数据后关闭弹窗时，把整个更新后的列表传递给父组件：

addStatus() {
  const IssueDataDTO = {};
  IssueDataDTO['name'] = this.statusForm.value.name;
  IssueDataDTO['backlog'] = this.statusForm.value.backlog;
  IssueDataDTO['status'] = "ACTIVE";
  // 注意：这里要和服务类的方法名统一，比如改成this.issueService.UpdateStatus
  this.issueService.UpdateStatus(IssueDataDTO).subscribe(res => {
    this.IssueDataDTOList.push(res);
    // 关闭弹窗时返回完整的更新后列表
    this.matDialogRef.close(this.IssueDataDTOList);
  });
}

同时修正弹窗组件的构造函数泛型：

constructor(
  private matDialogRef: MatDialogRef<EditIssueDataComponent>, 
  private formBuilder: FormBuilder, 
  private issueService: IssueService, 
  private snackBar: MatSnackBar, 
  @Inject(MAT_DIALOG_DATA) public data: any
) { }

2. 优化父组件的数据源更新逻辑

不需要每次都重新创建MatTableDataSource，直接更新现有数据源的data属性即可，这样还能保留分页、排序状态：

updatingDataSource(result) {
  if (result && result.length) {
    // 直接更新数据源的data属性，触发表格刷新
    this.dataSource.data = result;
    // 如果分页/排序状态丢失，再重新绑定（一般不需要）
    // this.dataSource.paginator = this.paginator;
    // this.dataSource.sort = this.sort;
  }
}

方案二：仅返回新数据，在父组件追加（更高效） #

如果数据量较大，传递整个列表会浪费性能，可以只返回新添加的单条数据，在父组件中追加：

1. 弹窗组件返回单条新数据

addStatus() {
  const IssueDataDTO = {};
  IssueDataDTO['name'] = this.statusForm.value.name;
  IssueDataDTO['backlog'] = this.statusForm.value.backlog;
  IssueDataDTO['status'] = "ACTIVE";
  this.issueService.UpdateStatus(IssueDataDTO).subscribe(res => {
    // 仅返回新添加的单条数据
    this.matDialogRef.close(res);
  });
}

2. 父组件追加新数据

updatingDataSource(newItem) {
  if (newItem) {
    // 复制现有数据并追加新项，触发变更检测
    const updatedData = [...this.dataSource.data, newItem];
    this.dataSource.data = updatedData;
  }
}

总结 #

两种方案都能解决旧数据消失的问题，方案二更适合大数据量场景，方案一逻辑更简单直观。另外记得统一服务方法名，避免出现调用错误。

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