Взаимозависимость ячеек AG-Grid

У меня есть простая настройка таблицы AG-Grid + Angular 5, и я бы хотел, чтобы AG Grid выполнил следующие вычисления в той же строке.

Формула
а * б = с
б = с / а

Однако я не очень успешен в использовании valueGetters. Я считаю, что в итоге получаю какой-то эффект пинг-понга. Ошибок не возникает, но как только я пытаюсь изменить b или c, получаю странные результаты.
Я перечисляю свои фрагменты кода ниже. Есть ли у кого-нибудь идеи, как это решить?

app.component.html

<ag-grid-angular 
    #agGrid style = "width: 100%; height: 350px;" 
    class = "ag-theme-balham"
    [gridOptions] = "gridOptions"
    [columnDefs] = "columnDefs"
    [showToolPanel] = "showToolPanel"
    [defaultColDef] = "defaultColDef"
    [rowData] = "rowData">
</ag-grid-angular>



app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  private columnDefs;
  private rowData;
  private defaultColDef;

  constructor() {


    this.columnDefs = [
      { headerName: 'a', field: 'a', editable: false },
      { 
        headerName: 'b', 
        field: 'b',
        valueGetter: this.numCalc
      },
      {
        headerName: 'c',
        field: 'c',
        valueGetter: this.resCalc
      }
    ];

    this.rowData = [
      { a: 10, b: 1, c: 10 },
      { a: 20, b: 2, c: 40 },
      { a: 30, b: 3, c: 90 }
    ];

    this.defaultColDef = { editable: true }
  }


  resCalc(params) {
    return params.data.a * params.data.b;
  }

  numCalc(params) { 
    return params.data.c / params.data.a;
  }
}
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
371
1

Ответы 1

Я бы порекомендовал вам вместо этого использовать сделка.

Ниже приведен пример gridOptions для вашего случая:

this.gridOptions = <GridOptions> {
  getRowNodeId: params => params.a,
  onCellEditingStopped: params => {
    const { a } = params.node.data;
    if (params.column.getColId() === 'b') {
      const data = { a, b: parseInt(params.value, 10), c: a * params.value };
      this.gridOptions.api.updateRowData({ update: [data] })
    } else if (params.column.getColId() === 'c') {
      const data = { a, b: params.value / a, c: parseInt(params.value, 10) };
      this.gridOptions.api.updateRowData({ update: [data] })
    } 
  }
};

Большое спасибо, я попробую ваш подход.

Fisk 14.06.2018 02:31

Не беспокойтесь, обратите внимание, что вам также следует удалить свой valueGetter, чтобы избежать путаницы.

Ngoc Nam Nguyen 14.06.2018 03:07

Другие вопросы по теме