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

【问题标题】：Reset the Pinned Bottom Row Data in ag-grid Angular 8在 ag-grid Angular 8 中重置固定的底行数据
【发布时间】：2020-03-04 01:50:22
【问题描述】：

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

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

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

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

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


});

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

【问题讨论】：

您能否通过一些示例提供更多解释
@Shravan 我所做的与link 类似，但我想要相同固定原始动态的值
所以如果下拉选择发生变化，您基本上希望底部固定行更新值？我对吗？这个下拉菜单在 AgGrid 里面吗？
是的，不，它是孤立的

标签： angular ag-grid

【解决方案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。

【讨论】：