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

【问题标题】：ag-grid cell-renderer component loses its click-ability when data are updated更新数据时，ag-grid cell-renderer 组件失去了可点击性
【发布时间】：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% 确定。如果是这种情况，是否有任何解决方法可以阻止这种影响发生？

【问题讨论】：

标签： angular observable ag-grid ag-grid-angular cellrenderer

【解决方案1】：

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

您可以在 cellRenderer 中实现 refresh() 方法组件并处理刷新逻辑，以便单元格渲染器如果有数据刷新，组件知道该怎么做。这是一个示例 - Handling refresh
在你这样做之前，有如果您在单元格渲染器上调用刷新的多种原因没有使用首选的api方法来设置数据，然后刷新不叫。您将不得不手动调用 api.refreshCells()上述解决方案每次刷新数据时
工作。更多信息在这里 - Events causing refresh
如果解决方案 1 很麻烦，那么简单的方法是在每次数据更改时使用 api.redrawRows()。想想ngOnChanges。重绘行重新创建行的整个 DOM 并再次应用单元格渲染器，就好像行是新创建的一样。根据文档 -

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

该行是否为 fullWidth。

用于任何单元格的 cellRenderer（因为在创建单元格时指定了一次）。

你想要通过回调为行指定不同的样式
getRowStyle() 或 getRowClass()。

示例 - Redraw rows

【讨论】：