在 ag-grid Angular 8 中重置固定底行数据

Question

我使用固定底行数据作为页脚来显示 AG-grid 中行的总和，但问题是，我无法保留固定行的值（总和是一个 JSON 对象，包含已经从后端） 。

如果不使用对齐网格作为页脚，我该如何解决？

注意：接收的总和不是静态的，将根据从下拉列表中选择的 ID 进行更改

this._myService.getProjectSummation("",[],selected,selected).subscribe(data=>{

  this.gridApi.setPinnedBottomRowData([]);
  this.gridApi.setPinnedBottomRowData(JSON.parse(data));


});

我所做的与此链接类似，但在我的代码中，固定的原始数据值不是静态的，它会根据 Select 中选择的 Option 进行更改

Answer 1

使用<select>标记上的change事件响应下拉选择更改，然后根据您的选择更新底部固定行。 我已经使用不同货币的购物车项目的简单总计算来展示这一点作为示例。

模板文件：

<h1>Ag Grid</h1>

<select (change)="calculateTotal($event)">
  <option 
    *ngFor="let item of currency" 
    [value]="item.name"
  >{{ item.name }}</option>
</select>

<ag-grid-angular 
  style="width: 95%; height: 250px" 
  class="ag-theme-balham" 
  [columnDefs]="columns" 
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

组件文件：

  calculateTotal(event) {
    let ccyName = event.target.value;
    let ccy = this.currency.find(item => item.name === ccyName);

    this.gridApi.setPinnedBottomRowData([
      { product: `TOTAL (in ${ccy.name})`, price: this.total * ccy.factor }
    ]);
  }

完整的例子可以发现这里的Stackblitz。