Question

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

代码如下：

grid.model.ts

export interface Row {
    id: string;
    make:string;
    model:string,
    price:number;
  };
  
  export interface Column {
    colId: string;
    field:string;
    editable:boolean;
  };

grid.state.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 }
          
      ]
  };

grid.selector.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 }>()
  );

grid.reducer.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-grid 的 immutableData 让它工作。参考https://www.ag-grid.com/angular-grid/immutable-data/

当我更新角度 Ag-grid 表格中的单个单元格（使用 NgRx 存储）时，整个表格将重新呈现

1 个答案: