更改数据（NgRx存储）时，防止Ag-Grid重新呈现

Question

我正在使用Ag-grid和NgRx商店作为其数据源。数据在我的父组件中处理，并通过可观察的（tableData）传递给我的表组件。

<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 });
 }

该解决方案的问题是整个表数据都被重新加载。这将导致表的大小调整为autoColumnWidth，并且，如果我一直在向下滚动表，则会将滚动条重置为顶部状态。

使用

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

的工作原理很吸引人，但前提是我不更新应用程序状态。问题是我希望并且需要每次用户在表上执行操作时都要更新应用程序状态，以保持前端数据和存储数据一致。

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

Answer 1

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

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

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

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