Предупреждение 'нулевой ширины сетки' при использовании sizeColumnsToFit () ag-Grid на двух отдельных ag-гридах, отображаемых в меню вкладок - PullRequest
Новая
       31

Предупреждение 'нулевой ширины сетки' при использовании sizeColumnsToFit () ag-Grid на двух отдельных ag-гридах, отображаемых в меню вкладок

0 голосов
/ 04 января 2019

Получение предупреждения ниже при изменении размера ag-Grid (изменение размера окна браузера) и переключении между двумя вкладками:

ag-Grid: попытался вызвать sizeColumnsToFit (), но сетка возвращается с нулевой шириной, может быть, сетка еще не видна на экране?

Я воспроизвел ситуацию в Stackblitz:

https://angular -jpmxjy.stackblitz.io /

Вот состав тестового приложения:

  • PrimeNG p-tabMenu в компоненте: header.component
  • Ag-Grid на компоненты: delleverancer.component и leverancer.component.

Вы увидите ошибку предупреждения в chrome dev tools, когда вы изменяете размер сетки и переключаетесь между tabMenu 'Leverancer' и 'Delleverancer'.

Вы можете увидеть код здесь:

https://stackblitz.com/edit/angular-jpmxjy

Как мне удалить эту нежелательную ошибку предупреждения?

enter image description here

Ответы [ 2 ]

0 голосов
/ 02 августа 2019

Старый поток, но для ответа реакции и будущих страдальцев у меня возникла та же проблема, и проблема заключалась в очистке прослушивателя событий с помощью componentWillUnmount.

Чтобы увидеть, что происходит с вашими слушателями событий, используйте (в Chrome) getEventListeners (окно) и посмотрите, как ваши компоненты добавляют их, но не удаляют их при смене страниц и т. Д. После реализации приведенного ниже решения вы должны увидеть событие слушатели удаляются, когда ваш компонент уничтожен.

Нужно использовать функцию для слушателя, чтобы иметь правильную ссылку для удаления.

Предполагая подход на основе классов: 

export class someAgGrid extends Component { your brilliance }

componentWillUnmount() {
     window.removeEventListener('resize', this.daListener);
 };

daListener = () => {
    if (!this.gridApi) return;
    setTimeout(() => { this.gridApi.sizeColumnsToFit(); }, 200);
 };

firstDataRendered = (params) => {
    this.gridApi = params.api;
    this.gridApi.sizeColumnsToFit();
    window.addEventListener('resize', this.daListener);
 };

в функции рендеринга: 

return (
     <div className='ag-theme-material'>
        <AgGridReact
            ...your stuff
            onFirstDataRendered={this.firstDataRendered}
        />
     </div>
 )
0 голосов
/ 06 января 2019

Ошибки такого рода обычно означают, что в вашем приложении есть утечка памяти.

После просмотра вашего кода я заметил, как вы подписываетесь на window:resize событие 

window.addEventListener("resize", function () { ...

Вы должны знать, что эта подписка останется там даже после уничтожения компонента.

Вы можете написать removeEventListener в ngOnDestroy hook. Но для этого вы должны сохранить ссылку на оригинальную прикрепленную функцию. Лучше было бы использовать специальный Angular @HostListener декоратор, который возьмет на себя ответственность за removeEventListener под крючком: 

@HostListener('window:resize')
onResize() {
  if (!this.gridApi) return;

  setTimeout(() => {
    this.gridApi.sizeColumnsToFit();
  });
}

Разветвленный стек-блиц

Чтобы не повторяться, вы можете создать директиву, такую ​​как:

AG-грид-resize.directive.ts 

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

Теперь все, что вам нужно, чтобы добавить это поведение, это добавить атрибут в вашу сетку: 

<ag-grid-angular 
  ...
  ag-grid-resize       <============
>
</ag-grid-angular>

Пример Stackblitz

...