ag-grid 在路由到另一个组件然后返回到网格组件时发出警告

Question

我怎样才能摆脱这个警告？

上面是我在谷歌开发工具控制台中收到的警告：

ag grid：网格 api 函数 setRowData() 无法调用，因为网格已被破坏。 请不要在被破坏的网格上调用网格 API 函数 - 事实上，您不应该保留 API 引用，您的应用程序存在内存泄漏！当网格被破坏时删除 API 引用。

以下是.ts代码：

gridApi: any;

@Input()
data: any;
@Input()
gridOptions: any;
@Input()
columnDefs: any;

onGridReady(params: any) {
  this.gridApi = params.api;
  this.data.subscribe((data: any) => {
    params.api.setRowData(data);
    });
}

当我路由到另一个组件然后返回到此组件时，会发生此错误。 版本： 农业网格：v29 角度：v15

Answer 1

如果没有有效的示例，很难说清楚。

this.data

是可观察的吗？如果您收到内存泄漏警告，请尝试以下操作：

onGridReady(params: any) {
  this.gridApi = params.api;
  this.data
    .pipe(take(1))
    .subscribe((data: any) => {
      params.api.setRowData(data);
    });
}

在不使用

.pipe(take(<number>))

的情况下订阅可观察量是内存泄漏的典型来源。 读一读

https://www.learnrxjs.io/learn-rxjs/operators/filtering/take#why-use-take

或

https://medium.com/@sub.metu/angular-how-to-avoid-memory-leaks-from-subscriptions-8fa925003aa9

Answer 2

以上答案与此问题无关。问题是在订阅仍在运行时导航到页面将导致即使导航离开组件，该过程仍然继续。这很容易在代码中重现

onGridReady(params: any) {
  this.gridApi = params.api;
  this.data
    .pipe(take(1))
    .subscribe((data: any) => {
     if(params.api.destroyCalled){  <--- Had to check here if destroyed was called while the data is being fetched from the service.
          return;
        }
      params.api.setRowData(data);
    });
}

如果在服务返回之前调用了destroy，那么它仍然会继续setRowData，这会抛出错误。

Answer 3

以上答案与此问题无关。问题是导航到页面... - 此评论是正确的。 你需要检查！gridApi.destroyCalled

在 Angular/ts destroyCalled 中，它不会编译，因为属性是私有的并且没有提供访问器，但可以通过 !this.gridApi['destroyCalled'] 来绕过它