Как динамически изменить имя заголовка на основе данных, поступающих из бэкэнда?

Question

Я использую ag-grid в своем угловом приложении.Я определил заголовки для моей сетки внутри массива columnDefs.Для моей колонки есть один заголовок Amount.Я хочу, чтобы это было динамическим, как если бы валюта, исходящая из бэкэнда, была долларом США, я хочу, чтобы мой заголовок был «Сумма доллара», если валюта была INR, я хочу, чтобы мой заголовок был «Сумма INR» и так далее.Я попробовал все, что указано в документации, но я не могу заставить это работать.

Я пытался использовать setColumnDefs (colDefs), но он не работает, или, возможно, я не использую его правильно, так как в документах не так много говорится оего использование

Мой код выглядит следующим образом: -

Код файла моего компонента

ngOnInit() { 
      this.columnDefs2 = [
      {
        headerName: '#', width: 30, checkboxSelection: true, suppressSorting: 
         true,
        suppressMenu: true, hide: this.colhide, cellStyle: {
          'padding-top': '2px',
        }
      },      
      { headerName: 'Currency', field: 'currency', colId:'currencyname', width: 
       70, minWidth: 70, maxWidth: 150, cellStyle: { 'padding-top': '2px' }
      },

      { headerName: 'Amount', field: 'amount', width: 65, minWidth: 65, 
       maxWidth: 150, cellStyle: { 'padding-top': '2px' }
      },
      { headerName: 'Amount USD', field: 'amountUSD', width: 100, minWidth: 100, 
        maxWidth: 150, cellStyle: { 'padding-top': '2px' } 
      }
    ];   
  }

onGridReady(e,row){
    var col = this.gridOptions.columnApi.getColumn("currencyname");
    var colDef = col.getColDef();
    // update the header name
    colDef.headerName = "New Header";
    this.gridOptions.api.refreshHeader();

  }

HTML-код

<ag-grid-angular style="width: 100%; height: 100%" class="ag-dark" [columnDefs]="columnDefs2" (cellClicked)="agGridCellClicked($event, row)"
                        [rowData]="row.contDetailJO" rowSelection="multiple" (rowSelected)="onRowSelected($event, row)" (onGridReady)="onGridReady($event, row)" [gridOptions]="{rowHeight: 50}"
                        [domLayout]="'autoHeight'"  [enableColResize]="true">
                      </ag-grid-angular>

Answer 1

Вы можете указать headerValueGetter, как описано в этом ответе.

Здесь представляет собой пример стека блика.

Answer 2

в тс defaultDateFormat: string;defaultTimeFormat: string;

конструктор (private yourService: YourService,) {

this.defaultCurrencySymbol = this.settingService.defaultCurrencySymbol.value;

}

в служебном файле defaultCurrencySymbol = new BehaviorSubject ('');

systemOptions это api Response

private setCurrencyType (systemOptions: any []) {

const DEFAULT_CURRENCY_SYMBOL = 'ApiResponceType';
const defaultCurrencySymbol = systemOptions.find(option =>
  option.attributes.keyName === DEFAULT_CURRENCY_SYMBOL).attributes.keyValue;
if (defaultCurrencySymbol){
  this.defaultCurrencySymbol.next(defaultCurrencySymbol);
}

}

В HTML

{{defaultCurrencySymbol}} {{}} YourAmount