Постоянство данных в ag-grid Angular - PullRequest
Новая
       34

Постоянство данных в ag-grid Angular

0 голосов
/ 08 мая 2019

Я построил две сетки Grid_A и Grid_B, каждая из которых содержит столбец с именем «Activite».
Когда пользователь редактирует ячейки этого столбца в Grid_A, те же значения отображаются в этом столбце в Grid_B Я сделал эту работу через сервис, который передает данные между двумя компонентами сетки.

«Актив» в сетке_А

enter image description here

«Актив» в сетке_B

enter image description here
До здесь все идеально. Однако, когда я возвращаюсь к сетке А и изменяю ячейку из этого столбца.
enter image description here
В grid_B я теряю предыдущие значения других ячеек:
enter image description here

Вот код, который заполняет столбец в 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 / Существует ли собственный способ агрегирования для обеспечения сохранности данных?
3 / Должен ли я начать использовать базу данных (например, MongoDb) для достижения цели сохранения данных в сетках?
Спасибо!
PS: если я не отредактирую столбец Activite в Grid_A. Данные в столбце Activite в Grid_B остаются нетронутыми. Т.е .: данные сохраняются. Он исчезнет, ​​только если я снова изменю данные в Grid_A.

1 Ответ

0 голосов
/ 09 мая 2019

Я только что нашел очень простое и наглядное решение.
Мол, я объяснил ранее, я использовал сервис для передачи данных между сетками.
Все, что мне нужно было сделать, чтобы данные сохранялись в обоих компонентах с ошибками:
Сохраняйте значения ячеек с помощью сервисов и обновляйте их в сетках каждый раз, когда они инициализируются.
(Я не знаю, правильный ли это метод или нет, но он прост и работает. Если у вас есть лучшее решение, пожалуйста, дайте мне знать).

Вот служебный файл: 

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>

Надеюсь, это кому-нибудь поможет, там

...