重置ag网格Angular 8中固定的底部行数据

Question

我使用固定的底部行数据作为页脚来显示AG网格中的行的总和，但问题是，我无法休息固定行的值(总和是JSON对象，包含已经从后端计算的总和值(。

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

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

this._myService.getProjectSummation("",[],selected,selected).subscribe(data=>{
this.gridApi.setPinnedBottomRowData([]);
this.gridApi.setPinnedBottomRowData(JSON.parse(data));

});

我所做的与此链接类似，但在我的代码中，固定的原始数据值不是静态的，它将根据从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 }
]);
}

完整的例子可以在Stacklitz上找到。