Сброс закрепленных данных нижнего ряда в ag-grid Angular 8

Question

Я использовал закрепленные данные нижней строки в качестве нижнего колонтитула для отображения суммирования строк в AG-сетке, но проблема в том, что я не могу перевести значение закрепленной строки (суммирование представляет собой JSON Объект содержит значения суммирования, которые уже были рассчитаны из Backend) .

Как можно разрешить это без использования выравниваемой сетки в качестве нижнего колонтитула ?

Примечание: полученное суммирование не указано c будет изменено в зависимости от выбранного идентификатора из выпадающего списка

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

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


});

То, что я сделал аналогично этому Ссылка , но в моем коде закреплено значения необработанных данных не уста- навливаются c, они будут меняться в зависимости от выбранной опции выбора

Answer 1

Ответьте на изменения выпадающего списка, используя событие change для тега <select>, а затем обновите нижнюю закрепленную строку в соответствии с вашим выбором. Я показал это, используя простой общий расчет позиций корзины в разных валютах в качестве примера.

Файл шаблона:

<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.