英文:
ag-grid destroyed warning when routing to another component and then coming back to the grid component
问题
如何消除这个警告？
上面是我在Google Dev工具控制台中收到的警告：
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);
});
}
当我路由到另一个组件然后返回到这个组件时，会发生此错误。
版本信息：
ag-agrid: v29
angular: v15
英文:
How can I get rid-off this warning?
Above is the warning I'm getting in google dev tool console:
ag grid: grid api function setRowData() cannot be called as the grid has been destroyed.
Pleased don't call grid API functions on destroyed grids - as a matter of fact you shouldn't be keeping the API reference, your application has a memory leak! Remove the API reference when the grid is destroyed.
Below is the .ts code:
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);
});
}
This error happens when I route to another component and then come back to this component.
versions:
ag-agrid: v29
angular: v15
答案1
得分: 0
无法提供完全相同的格式，以下是翻译好的内容：
"没有一个可工作的示例很难说。
this.data 是一个 Observable 吗？如果你收到了内存泄漏的警告，请尝试以下操作：
onGridReady(params: any) {
this.gridApi = params.api;
this.data
.pipe(take(1))
.subscribe((data: any) => {
params.api.setRowData(data);
});
}
在不使用 .pipe(take(<number>)) 的情况下订阅 Observables 是内存泄漏的经典原因。
请阅读：
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"
英文:
It's hard to tell without a working example.
Is this.data an Observable? If you are being warned of a memory leak then please try this:
onGridReady(params: any) {
this.gridApi = params.api;
this.data
.pipe(take(1))
.subscribe((data: any) => {
params.api.setRowData(data);
});
}
Subscribing to observables without using .pipe(take(<number>)) is a classic source of memory leaks.
Have a read of
https://www.learnrxjs.io/learn-rxjs/operators/filtering/take#why-use-take
or
https://medium.com/@sub.metu/angular-how-to-avoid-memory-leaks-from-subscriptions-8fa925003aa9
答案2
得分: 0
以下回答与此问题无关。问题是在订阅仍在运行时导航到页面会导致即使从组件导航离开，进程仍然继续。这在代码中很容易重现。
onGridReady(params: any) {
this.gridApi = params.api;
this.data
.pipe(take(1))
.subscribe((data: any) => {
if (params.api.destroyCalled) { // 在从服务获取数据时需要在此处检查是否已调用destroy。
return;
}
params.api.setRowData(data);
});
}
如果在服务返回数据之前已调用destroy，则它仍将继续setRowData，这将引发错误。
英文:
The above answer has nothing to do with this issue. The problem is navigating to a page while the subscription is still running will cause the process to still continue even when navigating away from the component. This is easily reproducible in code
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);
});
}
If the destroyed was called before the service returned, then it will still continue to setRowData which will throw the error.
答案3
得分: 0
The above answer has nothing to do with this issue. The problem is navigating to a page ... - this comment is correct.
you need to check !gridApi.destroyCalled
in angular/ts destroyCalled it will not compile as property is private and no accessor provided but it can be bypassed as !this.gridApi['destroyCalled']
英文:
The above answer has nothing to do with this issue. The problem is navigating to a page ... - this comment is correct.
you need to check !gridApi.destroyCalled
in angular/ts destroyCalled it will not compile as property is private and no accessor provided but it can be bypassed as !this.gridApi['destroyCalled']
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论