javascript - 如何进行第二次 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”

ERROR 错误: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);
      }

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

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

我有一个 Plunker:

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

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

Answer 1

您需要使用 Arrow function像下面

  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);
  }

Similar post: ag-grid server side infinite scrolling accessing props