AG-Grid: перевод заголовка с помощью ngx-translate (угловой)

Question

Мы используем Angular для визуализации сетки AG.Мы хотим, чтобы заголовки сетки ag были переведены на язык пользователя.

Ag grid code:
<ag-grid-angular class="ag-theme-material" [rowData]="productionOrders">
   <ag-grid-column [headerName]="'ORDERS.GRID.EntryCode' | translate" field="entry"></ag-grid-column>
   <ag-grid-column [headerName]="ORDERS.GRID.EntryDescription" field="entryDescription"></ag-grid-column>
</ag-grid-angular>

The same way we can translate a value on our html page itself
<span>{{ 'ORDERS.Status' | translate}}</span>

Я заметил, что когда загружаются переводы, ag grid не замечает, когда переводы загружаются.Однако значение на самой html-странице переводится.

Дополнительная информация: Канал перевода ngx-translate является "нечистым" каналом, что означает, что его значение может измениться (например, когда все переводы загружены)

Точно так же, при использовании headerName без перевода, оно не обновляется:

Ag grid code:
   <ag-grid-angular class="ag-theme-material" [rowData]="productionOrders">
   <ag-grid-column [headerName]="bindedString" field="entry"></ag-grid-column>
</ag-grid-angular>

Angular/typescript
this.lazyString = 'test-1';
setTimeout(() => {
  this.lazyString = 'test-2';
}, 3000);

Имя заголовка никогда не обновляется до "test-2"

Answer 1

Получатели значения заголовка

Используйте headerValueGetter вместо colDef.headerName, чтобы разрешить динамические имена заголовков.

private translator: TranslateService;
...
colDef.headerValueGetter : this.localizeHeader.bind(this)
....
localizeHeader(params){
    let headerIdentifier = params.colDef.field; // params.column.getColId();
    this.translator.get(headerIdentifier).map((res: string) => {
        return res;
    });
}

Образец из документа

{ 
    headerName: "Country", 
    field: "country", 
    width: 120, 
    enableRowGroup: true, 
    enablePivot: true, 
    headerValueGetter: countryHeaderValueGetter 
},

function countryHeaderValueGetter(params) {
    switch (params.location) {
        case 'csv': return 'CSV Country';
        case 'clipboard': return 'CLIP Country';
        case 'toolPanel': return 'TP Country';
        case 'columnDrop': return 'CD Country';
        case 'header': return 'H Country';
        default: return 'Should never happen!';
    }
}