Question

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

grid_A中的“活动”

grid_B中的“活动”

直到这里，一切都是完美的。但是，当我回到网格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中的“活动”列。 Grid_B的“活动”列中的数据保持不变。即：数据持续存在。仅当我再次在Grid_A中修改数据时，它才会消失。

Answer 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>

希望这对外面的人有帮助

Ag-Grid Angular中的数据持久性

1 个答案: