Компонент рендерера ячейки ag-grid теряет способность щелкать при обновлении данных - PullRequest
Новая
       136

Компонент рендерера ячейки ag-grid теряет способность щелкать при обновлении данных

0 голосов
/ 08 марта 2020

У меня есть простой angular компонент, который реализует ag-сетку, подобную этой: 

<ag-grid-angular
  *ngIf="data"
  domLayout='autoHeight'
  class="ag-theme-material"
  suppressFieldDotNotation="true"
  [pagination]="true"
  [paginationPageSize]="5"
  [defaultColDef]="defaultColDef"
  [gridOptions]="gridOptions"
  [frameworkComponents]="frameworkComponents"
  [rowData]="data.rowData"
  [columnDefs]="data.columnDefs"
  (gridReady)="onGridReady($event)"
  (cellKeyPress)="onCellKeyPress($event)">
</ag-grid-angular>

Затем я использую этот компонент внутри других компонентов, где мне нужно отобразить данные с поддержкой сетки . 

<shared-grid [data]="projectStore.datasetsGridData | async" (action)="onDatasetsTableAction($event)"></shared-grid>

Как вы можете видеть, я использую наблюдаемое для установки сеток columnDefs и rowData.

Сетка настроена на использование компонента cellRenderer, который реализует кликабельный элемент в одном из столбцов, например: 

<div (click)="doSomething()">...</div>

Я заметил, что для этих сеток данные ([data] input) постоянно меняют ячейку с помощью настраиваемого кликабельного элемента div, теряющего кликабельность, пока данные меняется. Когда новые данные перестают поступать, div снова активируется.

Я думаю, что это происходит из-за постоянного обновления сетки, но я не уверен на 100%. Если это так, есть ли обходной путь для прекращения этого эффекта?

1 Ответ

0 голосов
/ 28 марта 2020

Существует 2 возможных решения этой проблемы.

  1. Вы можете реализовать метод refresh() в компоненте cellRenderer и обработать refre sh logi c, чтобы ячейка Компонент рендерера знает, что делать, если есть данные refre sh. Вот пример - Обработка refre sh
    Перед этим есть несколько причин, по которым refre sh вызывается для средства визуализации ячеек, если вы не используете предпочтительный метод API для установки данные, то обновление не вызывается. Вам придется вручную вызывать api.refreshCells() каждый раз, когда данные обновляются для вышеуказанного решения до
    работы. Подробнее об этом здесь - События, вызывающие refre sh

  2. Если решение 1 громоздко, то простым выходом будет использование api.redrawRows() каждый раз, когда ваш изменения данных. Подумайте ngOnChanges. Перерисовываемые строки воссоздают весь DOM строки и снова применяют средство визуализации ячеек, как будто строка создается заново. Согласно документам -

Используйте перерисовку строки, если вы хотите создать строку заново с нуля. Это полезно, когда вы изменили свойство, которое используется только при первом создании строки, например:

  1. Независимо от того, является ли строка полной шириной или нет.
  2. cellRenderer, используемый для любой ячейки (поскольку это указывается один раз при создании ячейки).
  3. Вы хотите указать различные стили для строки с помощью обратных вызовов
    getRowStyle () или getRowClass ().

Пример - Перерисовать строки

...