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()。

示例 - 重繪行