更新数据时，ag-grid cell-renderer 组件失去了可点击性

Posted 2023-03-28

【中文标题】更新数据时，ag-grid cell-renderer 组件失去了可点击性

【英文标题】：ag-grid cell-renderer component loses its click-ability when data are updated

【发布时间】：2020-06-20 19:35:11

【问题描述】：

我有一个简单的角度组件，它实现了这样的 ag-grid：

<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>

如您所见，我使用 observable 来设置网格的 columnDefs 和 rowData。

网格被配置为使用cellRenderer 组件，该组件在其中一个列中实现可点击元素，例如：

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

我注意到，对于那些数据 ([data] input) 不断更改具有自定义可点击 div 的单元格的网格，只要数据发生更改，它就会失去其可点击性。当新数据停止出现时，div 可以再次点击。

我认为这是由于不断刷新网格而发生的，但我不能 100% 确定。如果是这种情况，是否有任何解决方法可以阻止这种影响发生？

【参考方案1】：

这个问题有两种可能的解决方案。

您可以在 cellRenderer 中实现 refresh() 方法 组件并处理刷新逻辑，以便单元格渲染器 如果有数据刷新，组件知道该怎么做。这是一个 示例 - Handling refresh 在你这样做之前，有 如果您在单元格渲染器上调用刷新的多种原因 没有使用首选的api方法来设置数据，然后刷新 不叫。您将不得不手动调用 api.refreshCells()上述解决方案每次刷新数据时 工作。更多信息在这里 - Events causing refresh

如果解决方案 1 很麻烦，那么简单的方法是在每次数据更改时使用 api.redrawRows()。想想ngOnChanges。重绘行重新创建行的整个 DOM 并再次应用单元格渲染器，就好像行是新创建的一样。 根据文档 -

如果您想从头开始重新创建行，请使用重绘行。这 当您更改了仅在以下情况下使用的属性时很有用 该行是第一次创建的，例如：

该行是否为 fullWidth。 用于任何单元格的 cellRenderer（因为在创建单元格时指定了一次）。 你想要 通过回调为行指定不同的样式 getRowStyle() 或 getRowClass()。

示例 - Redraw rows