Question

我有一个简单的AG-Grid + Angular 5表格设置，并希望AG Grid在同一行中执行以下计算。

式
a * b = c
b = c / a

但我在使用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;
  }
}

Answer 1

我建议你改用transaction。

以下是您案例的示例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] })
    } 
  }
};

AG-Grid Cell相互依赖

1 个答案: