时间戳

首页 > 解决方案 > 防止 Ag-Grid 在数据（NgRx 存储）更改时重新渲染

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

问题描述

我使用 Ag-grid 和 NgRx Store 作为其数据源。数据在我的父组件中处理并通过 observable ( 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 后如何防止表格重新呈现？

标签： angularrxjsngrxag-gridag-grid-angular

解决方案

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

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

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

谢谢你的帮助！我学到了很多

推荐阅读