重置 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));


});

我所做的与此类似 Link 但在我的代码中，固定的原始数据值不是静态的，它会根据从 Select

中选择的选项而改变

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 上找到完整示例 here。

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

Reset the Pinned Bottom Row Data in ag-grid Angular 8

ag-grid

angular