在 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。