Angular Material组件增改后数据源不自动刷新问题求助

你的组件在初始化时通过订阅this.template?.data获取初始数据并赋值给MatTableDataSource，但新增/编辑操作完成后，既没有手动更新数据源数组，也没有重新触发数据拉取，导致表格无法自动刷新最新数据。

提供两种可行方案，可根据你的业务场景选择：

方案一：手动更新数据源（无需重复请求接口） #

利用新增/编辑接口返回的最新数据，直接修改数据源数组，通过引用变更触发Angular变更检测：

save() {
  if(this.template?.frm.invalid) {
    return;
  }
   
  if(!this.selected) {
    this.confirm.open({Type: 'add'}).pipe(
      filter(x => x),
      exhaustMap(() => this.dictionaryService.httpAddDictionary(this.template?.urlName!, this.template?.frm.value))
    ).subscribe(
      (newItem) => {
        if(newItem) {
          this.template?.frm.reset();
          // 将新项加入数据源并触发刷新
          const currentData = this.dataSource.data as any[];
          currentData.push(newItem);
          this.dataSource.data = [...currentData];
          // 重新绑定排序，保留当前排序状态
          this.dataSource.sort = this.sort;
        }
      }
    );
  } else {
    this.confirm.open({Type: 'update'}).pipe(
      filter(x => x),
      exhaustMap(() => this.dictionaryService.httpEditDictionary(this.template?.urlName!, this.template?.frm.value) )
    ).subscribe(
      (updatedItem) => { 
        if(updatedItem) {
          this.template?.frm.reset();
          // 找到并替换数据源中已更新的项
          const currentData = this.dataSource.data as any[];
          const targetIndex = currentData.findIndex(item => item.Id === updatedItem.Id);
          if(targetIndex !== -1) {
            currentData[targetIndex] = updatedItem;
            this.dataSource.data = [...currentData];
            this.dataSource.sort = this.sort;
          }
          this.selected = null;
        }
      }
    );
  }
}

方案二：重新拉取最新数据（确保与后端数据完全一致） #

将数据加载逻辑抽为独立方法，在新增/编辑成功后重新调用，从后端获取完整最新数据：

// 抽离数据加载方法
private loadDictionaryData(): void {
  if(this.template?.data) {
    this.template.data.subscribe(data => {
      this.dataSource.data = data!;
      this.dataSource.sort = this.sort;
    });
  }
}

ngOnInit(): void {
  this.route.url.pipe(
    map(x => x[0].path),
    tap(name => {
      this.template = this.dictionaryService.getDictionaryTemplate(name!);
      if(this.template?.haveParent) {
        this.columns.push(this.template?.parentLabel!)
      }
      if(this.template?.haveNumberProperty) {
        this.columns.push(this.template?.numberPropertyName!)
      }
    })
  ).subscribe(() => {
    this.loadDictionaryData();
  });
}

save() {
  if(this.template?.frm.invalid) {
    return;
  }
   
  if(!this.selected) {
    this.confirm.open({Type: 'add'}).pipe(
      filter(x => x),
      exhaustMap(() => this.dictionaryService.httpAddDictionary(this.template?.urlName!, this.template?.frm.value))
    ).subscribe(
      y => {
        if(y) {
          this.template?.frm.reset();
          this.loadDictionaryData();
        }
      }
    );
  } else {
    this.confirm.open({Type: 'update'}).pipe(
      filter(x => x),
      exhaustMap(() => this.dictionaryService.httpEditDictionary(this.template?.urlName!, this.template?.frm.value) )
    ).subscribe(
      y => { 
        if(y) {
          this.template?.frm.reset();
          this.selected = null;
          this.loadDictionaryData();
        }
      }
    );
  }
}

• 使用[...currentData]创建新数组而非直接修改原数组，Angular变更检测依赖引用变化触发视图更新
• 重新绑定sort是为了保留表格当前的排序状态，避免刷新后排序重置
• 如果接口未返回新增/更新后的对象，优先选择方案二，确保数据与后端完全同步

内容的提问来源于stack exchange，提问作者M.Youssef