Компонент ag-grid cell-renderer теряет способность к нажатию при обновлении данных

У меня есть простой угловой компонент, который реализует такую ​​сетку 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%. Если это так, есть ли какое-нибудь обходное решение, чтобы этот эффект прекратился?


angular observable ag-grid ag-grid-angular cellrenderer
person J. Doe    schedule 08.03.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

  1. Вы можете реализовать метод refresh() в своем компоненте cellRenderer и обрабатывать логику обновления, чтобы компонент рендеринга ячеек знал, что делать при обновлении данных. Вот пример - Обработка обновления
    Прежде чем вы это сделаете, существует несколько причин, по которым обновление вызывается в средстве визуализации ячеек. Если вы не используете предпочтительный метод api для установки данных, обновление не вызывается. Вам придется вручную вызывать api.refreshCells() каждый раз, когда данные обновляются для вышеуказанного решения для работы
    . Подробнее об этом здесь - События, вызывающие обновление < / а>

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

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

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

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

person Pratik Bhat    schedule 28.03.2020