ag-grid cell-renderer 组件在数据更新时失去点击能力

Question

我有一个简单的角度组件，它实现了这样的 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% 确定。 如果是这种情况，是否有任何解决方法可以阻止这种影响发生？

Answer 1

此问题有 2 种可能的解决方案。

1. 您可以在 cellRenderer 组件中实现refresh()方法并处理刷新逻辑，以便单元渲染器组件知道如果有数据刷新该做什么。 这是一个示例 - 处理刷新
   在执行此操作之前，在单元格渲染器上调用 refresh 的原因有多种，如果您没有使用首选的 api 方法来设置数据，则不会调用 refresh。 每次为上述解决方案刷新数据时，您都必须手动调用api.refreshCells()
   工作。 更多关于这里 - 导致刷新的事件

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

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

1. 该行是否为全宽。
2. 用于任何单元格的 cellRenderer（因为这是在创建单元格时指定的一次）。
3. 您想通过回调为行指定不同的样式
   getRowStyle() 或 getRowClass()。

示例 - 重绘行