防止 Ag-Grid 在数据（NgRx Store）更改时重新渲染

Question

我正在使用 Ag-grid 和 NgRx Store 作为其数据源。数据在我的父组件中处理，并通过 observable (tableData) 传递到我的 table 组件。

<div class="table-wrapper" *ngIf=tableData>
 <ag-grid-angular
    class="ag-theme-balham"
    [columnDefs]="tableData.columnDefs"
    [rowData]="tableData.rowData" 
    [defaultColDef]="defaultColDef"
    [gridOptions]="gridOptions"
    (gridReady)="onGridReady($event)"
    (rowDataChanged)="onRowDataChanged($event)"
    (cellClicked)="cellClicked($)"
    >
 </ag-grid-angular>
</div>

ag-grid 列包含复选框。当用户单击一个单元格时，会发出一个事件，它会更改应用程序的当前状态、单击的复选框和整个 tableData。因此，UI 按预期反映了这些更改。

 @Input tableData;
 @Output cellValueChanged = new EventEmitter<>();

 constructor() { }

 onGridReady(params: any) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;

  setTimeout(() => {
   this.gridApi.sizeColumnsToFit();
   }, 1000);
 }

 cellClicked(event) {
  ...
  this.cellValueChanged.emit({ data });
 }

该解决方案的问题在于重新加载整个 table 数据。这会导致 table 调整为 autoColumnWidth，而且，如果我向下滚动 table，滚动条将重置为顶部状态。

正在使用

cellClicked(event) {
  ...
  this.gridApi.updateRowData({ update: data });
}

非常有效，但前提是我不更新应用程序状态。问题是我希望并且需要在每次用户对 table 执行操作时更新应用程序状态，以保持前端和存储数据一致。

如何防止 table 在更新 AppState 后重新呈现？

Answer 1

感谢您的帮助，我找到了解决方案。

使用 NGRX 或 RxJS 的第一步是使用 deltaRowMode。

我的代码的第二个问题是我正在动态创建 columnRefs。当我单击一个单元格时，不仅会重新计算 rowData，还会重新计算 columnRefs。这将导致电网重置。

感谢您的帮助！我学到了很多

防止 Ag-Grid 在数据（NgRx Store）更改时重新渲染

Prevent Ag-Grid from Re-Rendering when Data (NgRx Store) changes

rxjs

ag-grid

ngrx

angular

ag-grid-angular