Angular 9中如何实现表格数据无清空式刷新？

你的问题核心在于当前refresh方法没有实际获取新数据，只是对原数组做了浅拷贝，所以表格自然不会有变化。另外，加载状态的逻辑也不合理，应该在数据更新完成后再关闭loading。以下是修正方案：

1. 修正refresh方法逻辑 #

首先要在refresh中调用实际的数据获取接口（比如HTTP请求），拿到新数据后再更新tableData和tableHeader，同时正确处理加载状态：

refresh(){
  this.loadingicon = true;
  // 调用实际的数据获取方法，比如从API请求新数据
  this.dataService.getTableData().subscribe({
    next: (newData) => {
      // 用新数据替换原数组，通过引用变化触发Angular变更检测
      this.tableData = [...newData];
      // 如果表头也需要更新，同理替换
      // this.tableHeader = [...newHeader];
      this.loadingicon = false;
    },
    error: (err) => {
      console.error('数据加载失败:', err);
      this.loadingicon = false;
    }
  });
}

2. 确保子组件能响应数据变化 #

如果你的data-table是自定义子组件，需注意：

• 若使用ChangeDetectionStrategy.OnPush策略，必须通过输入属性的引用变化触发更新（上面的[...newData]已实现引用更新）；
• 子组件内部直接依赖输入的data和header渲染，不要缓存旧数据。

3. 移除无效操作 #

你之前写的this.tableData=[...this.tableData];只是复制原数组，没有任何数据更新，属于无效操作，直接替换为新数据赋值即可。

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