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

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

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

错误错误：ag-Grid：当网格位于图形行的中间时，无法使网格绘制行。当网格处于渲染阶段时，您的代码可能称为网格API方法。为了解决这个问题，请将API调用置于超时中，例如，代替setapi.refreshView（），调用setTimeout（function（）{api.refreshView（），0}）。要查看导致刷新的代码的哪一部分，请检查此堆栈跟踪。

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

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

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

我有一个柱塞：

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

有人能从Web API服务调用中懒加载细节网格数据吗？

Answer 1

您需要像下面一样使用Arrow function

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

看看更新的插件：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 server side infinite scrolling accessing props

Answer 2

嗯，在我的例子中，我发现“this”或这里的实例在 detailCellRendererParams 中是“未定义的”，它是在我的 ngOninit() 函数中声明的。因此，我在 ngOninit 中声明了一个名为 temp 的局部变量，并在 ngOninit() 函数的开头使用“this”启动它，如下所示：

ngOninit() {
    let temp_this: any = this;

    //declaration of detailCellRenderer and stuff...

    getDetailRowData: function(params) {
        temp_this.http.get('..').subscribe(data=>{  // don't forget that this will 
                                               // work only if you have the HTTP dependency injection
                                              // in your constructor else call a service using DI and subscribe it
            params.successCallback(data);
        } 
    }
}

与上面的代码不同，建议通过在组件中添加服务的依赖注入来调用由 HTTP 请求组成的服务方法。无论如何，希望这能帮助您理解为什么我们会收到此错误。

如何进行第二次HTTP调用以获取详细信息网格的数据-getDetailRowData（）

2 个答案: