如何进行第二次 HTTP 调用来获取详细网格的数据 - getDetailRowData()

Question

我有一个 ag-Grid 主/详细网格设置。因此，当主网格行展开时，它会加载详细网格。

请参阅简单示例： https://www.ag-grid.com/javascript-grid-master-detail/#example-simple-master-detail

这是基于详细网格的数据已经在主网格上使用的原始 json 数据中获取的基础上进行的。

我想获取id主网格所选行的 并进行第二次 HTTP 服务调用以获取详细网格的 json 数据。

简单的示例只是将 json 数据发送到 successCallback，如下所示：

      getDetailRowData: function(params) {
        params.successCallback(params.data.callRecords);
      }

我尝试将此方法更改为：

      getDetailRowData: function(params) {
        this.http
          .get(
            "https://gist.githubusercontent.com/adrianwright109/37a5e37ba2382b26f42b9d12a8593878/raw/60d2ffed511262a6a2e7e54e01bffd28c3701c5e/ClientProfiles.json"
          )
          .subscribe(data => {
            params.successCallback(data);
          });

        // params.successCallback(params.data.callRecords);
      }

使用此代码我收到以下错误：

错误类型错误：无法读取未定义的属性“http”

错误 错误：ag-Grid：当网格位于绘制行的中间时，无法让网格绘制行。当网格处于渲染阶段时，您的代码可能调用了网格 API 方法。为了克服这个问题，请将 API 调用设置为超时，例如，调用 setTimeout(function(){api.refreshView(),0})，而不是 api.refreshView()。要查看代码的哪一部分导致刷新，请检查此堆栈跟踪。

      getDetailRowData: function(params) {
        setTimeout(function() {
          this.http
            .get(
              "https://gist.githubusercontent.com/adrianwright109/37a5e37ba2382b26f42b9d12a8593878/raw/60d2ffed511262a6a2e7e54e01bffd28c3701c5e/ClientProfiles.json"
            )
            .subscribe(data => {
              params.successCallback(data);
            });
        }, 500);

        // params.successCallback(params.data.callRecords);
      }

使用此代码我收到以下错误：

错误类型错误：无法读取未定义的属性“get”

我有一个笨蛋：

https://next.plnkr.co/plunk/IS5a3jKyDJJSSdh0

有没有人通过 Web API 服务调用实现延迟加载详细网格数据？

Answer 1

您需要使用如下箭头功能

  getDetailRowData: (params) => {
    this.http
      .get('.....')
      .subscribe(data => {
        params.successCallback(data);
      });

看看更新后的 plunk：https://next.plnkr.co/edit/t84UtB4kALFfAxO1

如果你正在使用setTimeout，那么它应该是这样的

  getDetailRowData: (params) => {
    setTimeout(() => {
      this.http
        .get('...')
        .subscribe(data => {
          params.successCallback(data);
        });
    }, 500);

    // params.successCallback(params.data.callRecords);
  }

类似的帖子：ag-grid 服务器端无限滚动访问道具