如何在ng2-smart-table加载数据前显示加载器？

问题原因 #

你当前代码中，创建ServerDataSource后立刻调用this.loader.hide()，但ServerDataSource的API请求是异步执行的，导致全局加载器提前消失，而表格数据尚未完成绑定，出现空白期引发用户困惑。

解决方案 #

方案1：启用表格内置加载指示器 #

ng2-smart-table本身支持内置加载状态，只需在settings中配置loading选项，表格会在数据加载过程中自动显示加载动画，无需依赖全局加载器：

修改你的settings配置：

this.settings = {
  selectMode: 'single',
  hideHeader: false,
  hideSubHeader: false,
  mode: 'external',
  noDataMessage: '',
  // 添加加载配置
  loading: {
    indicator: true,
    // 可选：自定义加载模板（根据你的UI需求调整）
    template: `
      <div style="text-align: center; padding: 20px;">
        <span class="spinner-border text-primary"></span>
        <p>加载中...</p>
      </div>
    `
  },
  actions: {
    columnTitle: 'Action',
    position: 'right',
    width: '0%',
    add: false,
    edit: false,
    delete: false
  },
  columns: {
    Name: {
      title: 'Name',
      filter: false,
      width: '200px',
      type: 'custom'
    },
    version: {
      title: 'Version',
      width: '100px',
      filter: false,
      type: 'html'
    }
  },
  pager: {
    display: true,
    perPage: 10
  },
};

调整API调用函数，确保加载器在数据加载完成后隐藏：

function_callAPI(){
  this.loader.show();
  this.sourceData = new ServerDataSource(this.httpClient, {
    endPoint: this.baseUrl + "api/loadData",
    pagerLimitKey: "pageSize",
    pagerPageKey: "pageIndex",
    sortDirKey: "SortDirection",
    sortFieldKey: "SortColumn",
    filterFieldKey: 'filter',
    dataKey: 'result.data',
    totalKey: 'result.total'
  });
  
  // 监听表格数据加载完成事件，隐藏全局加载器
  this.sourceData.onChanged().subscribe((change) => {
    if (change.action === 'load') {
      this.loader.hide();
    }
  });
}

方案2：手动控制全局加载器的显示时机 #

如果更倾向使用全局加载器，关键是要等待ServerDataSource的数据加载完成后再隐藏。利用ServerDataSource的onChanged事件监听加载动作：

修改API调用函数：

function_callAPI(){
  this.loader.show();
  
  // 创建数据源
  this.sourceData = new ServerDataSource(this.httpClient, {
    endPoint: this.baseUrl + "api/loadData",
    pagerLimitKey: "pageSize",
    pagerPageKey: "pageIndex",
    sortDirKey: "SortDirection",
    sortFieldKey: "SortColumn",
    filterFieldKey: 'filter',
    dataKey: 'result.data',
    totalKey: 'result.total'
  });

  // 订阅数据源变化事件，加载完成时隐藏加载器
  this.sourceData.onChanged().subscribe((changeEvent) => {
    if (changeEvent.action === 'load') {
      this.loader.hide();
    }
  });
}

额外优化：设置加载中的无数据提示 #

可以在settings中配置noDataMessage为加载中的提示，避免表格完全空白：

this.settings = {
  // 原有配置...
  noDataMessage: '数据加载中...',
  // 原有配置...
};

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