Obtenir l'avertissement ci-dessous lors du redimensionnement de ag-Grid (modifier la taille de la fenêtre du navigateur) et basculer entre deux onglets:
ag-Grid: a essayé d'appeler sizeColumnsToFit () mais la grille revient avec une largeur nulle, peut-être que la grille n'est pas encore visible à l'écran?
J'ai reproduit la situation dans un Stackblitz:
https://angular-jpmxjy.stackblitz.io/
Voici la composition de l'application de test:
Vous verrez l'erreur d'avertissement dans les outils de développement Chrome, lorsque vous redimensionnez la grille et basculez entre l'ongletMenu «Leverancer» et «Delleverancer».
Vous pouvez voir le code ici:
https://stackblitz.com/edit/angular-jpmxjy
Comment supprimer cette erreur d'avertissement indésirable?
3 Réponses :
Ce type d'erreurs signifie généralement que vous avez une fuite de mémoire dans votre application.
Après avoir regardé votre code, j'ai remarqué comment vous vous abonnez à l'événement window: resize
<ag-grid-angular ... ag-grid-resize <============ > </ag-grid-angular>
Vous devez savoir que cet abonnement sera toujours là même après la destruction du composant.
Vous pouvez écrire removeEventListener dans ngOnDestroy hook. Mais pour cela, vous devez garder la référence à la fonction d'origine attachée. Un meilleur moyen serait d'utiliser un décorateur angulaire dédié @HostListener qui prendra la responsabilité de removeEventListener sous le crochet:
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[ag-grid-resize]'
})
export class AgGridResizeDirective {
private gridApi;
@HostListener('window:resize')
onResize() {
if (!this.gridApi) return;
setTimeout(() => {
this.gridApi.sizeColumnsToFit();
});
}
@HostListener('gridReady', ['$event'])
onGridReady(params) {
this.gridApi = params.api;
params.api.sizeColumnsToFit();
}
}
Stackblitz fourchu strong >
Pour ne pas vous répéter, vous pouvez créer une directive comme:
ag-grid-resize.directive.ts
@HostListener('window:resize')
onResize() {
if (!this.gridApi) return;
setTimeout(() => {
this.gridApi.sizeColumnsToFit();
});
}
Était sur le point de répondre à la même chose. Ne changerait pas un mot que vous avez écrit. Bonne réponse. J'ai adoré la suggestion supplémentaire pour @HostListener et la directive
Bonjour, si je recherche une version similaire pour React, pouvez-vous me suggérer comment je peux résoudre ce problème?
ne fonctionne pas, montrant la même erreur, gridPanel.js: 814 ag-Grid: a essayé d'appeler sizeColumnsToFit () mais la grille revient avec une largeur nulle, peut-être que la grille n'est pas encore visible à l'écran? même si j'ai appelé sizetoFit après l'événement onFirstDataRendered
@DevinMcQueeney Pouvez-vous le reproduire dans stackblitz?
Ancien fil de discussion, mais pour la réponse de réaction et les futurs victimes, j'avais le même problème et le problème était de nettoyer l'écouteur d'événements avec componentWillUnmount.
Pour voir ce qui se passe avec vos écouteurs d'événements, utilisez (dans Chrome) getEventListeners (fenêtre) et regardez comment vos composants les ajoutent mais ne les supprimez pas lorsque vous changez de page, etc. Après avoir implémenté la solution ci-dessous, vous devriez voir que les écouteurs d'événements sont supprimés lorsque votre composant est détruit.
Besoin pour utiliser une fonction pour l'auditeur afin d'avoir une référence appropriée à supprimer.
En supposant une approche basée sur les classes:
return (
<div className='ag-theme-material'>
<AgGridReact
...your stuff
onFirstDataRendered={this.firstDataRendered}
/>
</div>
)
dans la fonction de rendu:
XXX
À quoi sert setTimeout (() => {this.gridApi.sizeColumnsToFit ();}, 200); ? Vous appelez déjà sizeColumnsToFit () dans firstDataRendered .
cela m'a aidé
ngOnDestroy() {
try {
if (this.gridApi) {
this.gridApi.destroy();
this.gridApi = false;
}
} catch (error) {
}
}