当我更新角度Ag网格表中的单个单元格时(使用NgRx存储)，将重新渲染整个表

Question

我需要使用NgRx存储创建一个角度ag网格表，这样表中的所有单元格都是可编辑的，并且任何单元格的任何更改/更新都应该在存储中更新。然而当我更新角度Ag网格表中的单个单元格时(使用NgRx存储(，整个表被重新渲染。这导致性能问题。要求是只有更改/更新的行才应重新呈现。

代码如下：

网格模型.ts

export interface Row {
id: string;
make:string;
model:string,
price:number;
};

export interface Column {
colId: string;
field:string;
editable:boolean;
};

网格状态.ts

export interface TableState {
rows: Row[];
columns: Column[];
}
export const initialState:TableState = {
columns: [
{ colId:'make', field: 'make', editable:true },
{ colId:'model', field: 'model', editable:true },
{ colId:'price', field: 'price', editable:true}
],

rows: [
{ id: 'car_1', make: 'Toyota', model: 'Celica', price: 35000 },
{ id: 'car_2', make: 'Ford', model: 'Mondeo', price: 32000 },
{ id: 'car_3', make: 'Porsche', model: 'Boxter', price: 72000 }

]
};

网格选择器.ts

const selectTableState = createFeatureSelector<TableState>('grid');
export const selectRows = createSelector(selectTableState, (state)=>{
return state.rows;
});
export const selectColumns = createSelector(selectTableState, (state)=>{
return state.columns;
});

grid.actions.ts

export const updateRow = createAction(
'[GridAction] UPDATE_ROW',
props<{ nodeId:any; colId:any; value:any }>()
);

网格还原剂.ts

export const GridReducer = createReducer(
initialState,
on(updateRow, (state, { nodeId, colId, value }) => {
let getDraftRowData=function(state:TableState) {
return state.rows.map((item:Row) => {            
if (item.id === nodeId) {
return {
...item,
[colId]: value,
}
}
return item
});
}
let draftRowData = getDraftRowData(state);

return{...state, rows:draftRowData};


}),
);

app.component.ts

export class AppComponent {
title = 'ng-rx';
rows1$:Observable<Row[]>;
columns1$:Observable<Column[]>;
rows2$:Observable<Row[]>;
columns2$:Observable<Column[]>;
gridApi: any;
columnApi: any;
defaultColDef: any = {
valueSetter: (params:any) => {
let newVal = params.newValue;
const colId = params.colDef.colId;
const nodeId = params.node.id;
this.store.dispatch(updateRow({nodeId:nodeId, colId:colId, value:newVal}));
return false;
},
valueFormatter: (params:any) => {
console.log(params.value);
return params.value;
},
resizable: true
};
constructor(private store: Store<{grid:TableState}>){
this.rows1$ = this.store.select(selectRows);
this.columns1$ = this.store.select(selectColumns);
this.rows2$ = this.store.select(selectRows);
this.columns2$ = this.store.select(selectColumns);
}
onGridReady(params:any) {
this.gridApi = params.api;
this.columnApi = params.columnApi;
this.columnApi.autoSizeAllColumns();
}
getRowNodeId(data:any) {
return data.id;
}
}

Answer 1

我使用ag网格的immutableData使其工作。参考https://www.ag-grid.com/angular-grid/immutable-data/