ag-grid Angular中的数据持久性答案

【问题标题】：Data persistence in ag-grid Angularag-grid Angular中的数据持久性
【发布时间】：2019-09-26 05:32:21
【问题描述】：

我构建了两个网格 Grid_A 和 Grid_B，它们都包含一个名为“Activite”的列。
当用户在 Grid_A 中编辑此列单元格时，相同的值将显示在 Grid_B 中的此列中我通过在两个网格组件之间传递数据的服务完成了这项工作。

grid_A 中的“Activite”

grid_B 中的“Activite”

到这里为止，一切都很完美。但是，当我返回网格 A 并修改此列中的一个单元格时。

在 grid_B 中，我丢失了其他单元格的先前值：

这是填充 grid_B 中列的代码：

onGridReady(params) {
    this.gridApi = params.api;
    params.api.sizeColumnsToFit();
      for(let i = 0;i<this.editedRowId.length;i++) {
      var rowNode = this.gridApi.getRowNode(this.editedRowIds[i]);
      rowNode.setDataValue('activite', this.editedActiviteValues[i]);
   }

所以，这是我的问题：
1/ 为什么我在用 setDataValue 编辑第二个单元格后会丢失其他单元格中的值？
2/ 是否有一种 ag-grid 原生方式来确保数据持久性？
3/ 我应该开始使用数据库（例如：MongoDb）来实现网格间数据持久性的目标吗？
谢谢！
PS：如果我不编辑 Grid_A 中的 Activite 列。 Grid_B 中的 Activite 列中的数据保持不变。即：数据持续存在。只有当我在 Grid_A 中再次修改数据时它才会消失。

【问题讨论】：

在我看来，我认为您应该确保来自两个网格的数据都是“不可变的”。这将实现您确保来自 grid_a 的数据在您编辑它们时不会影响 grid_b 的目标，反之亦然。您是否曾使用过 Redux 或 Flux？
@wentjun 你的问题，不。你所说的“不可变”到底是什么意思
@wentjun 我刚刚找到了一个解决方案，并在答案中发布了它。你介意检查一下吗？
是的，看起来不错！！我认为这是最直接的方法 - 使用 observables 在组件之间传递数据

标签： angular ag-grid ag-grid-ng2 ag-grid-angular

【解决方案1】：

我刚刚找到了一个非常简单且显而易见的解决方案。
比如，我之前解释过，我使用服务在网格之间传递数据。
所有，为了使数据在两个组件中都存在错误，我必须做的是：
使用服务存储单元格值，并在每次初始化时在网格中更新它们。
（我不知道这是否是正确的方法，但它很简单并且确实有效。如果您有更好的解决方案，请告诉我）。

这是服务文件：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DescActCommunicateAct {
  private activiteSource = new BehaviorSubject<string[]>([]);
  currentActivite = this.activiteSource.asObservable();
  private rowSource = new BehaviorSubject<number[]>([]);
  currentRowIndex = this.rowSource.asObservable();
  constructor() {}
  sendActToBia(activiteValue: string[], rowEditedIndex:number[]) {
    this.activiteSource.next(activiteValue);
    this.rowSource.next(rowEditedIndex)
  }
}

这是您应该在两个网格中编写的代码：

import {DescActCommunicateAct} from '../services/descActCommunicateAct.service';
 constructor(private data: DescActCommunicateAct
    ) { }
    editedActiviteValues: string[];
   editedRowIds: number[];
    params: any;

ngOnInit() {
    this.data.currentActivite.subscribe(receivedActiviteValue => (this.editedActiviteValues = receivedActiviteValue));
    this.data.currentRowIndex.subscribe(receivedRowId => (this.editedRowIds = receivedRowId));
  }


onGridReady(params) {
    this.gridApi = params.api;
    params.api.sizeColumnsToFit();
      for(let i = 0;i<this.editedRowIds.length;i++) {
      console.log('________________________________________________________________________')
      var rowNode = this.gridApi.getRowNode(this.editedRowIds[i]);
      rowNode.setDataValue('activite', this.editedActiviteValues[i]);
      }}
    agInit(params: any): void {
      this.params = params;
    }



onCellValueChanged(params) {
    const colId = params.column.getId();


    if (colId === 'activite') {
      this.receivedActiviteValues.push(params.data.activite);
      this.receivedRowIndexes.push(params.node.id);
      this.data.sendActToBia(this.receivedActiviteValues, this.receivedRowIndexes);
    }
  }

最后，在 html 文件中的网格定义中：确保绑定“onGridReady”方法：

<ag-grid-angular
  style="width: 5000px ; height: 1000px;"
  class="ag-theme-balham"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  pagination
  (gridReady)="onGridReady($event)"
  [getRowHeight]="getRowHeight"
  [animateRows]="true"
  >
</ag-grid-angular>

希望这对外面的人有所帮助

【讨论】：