angular - AG-Grid:使用 ngx-translate( Angular )翻译 headerName

Question

我们正在使用 Angular 来可视化一个 AG 网格。我们希望将 ag 网格的标题翻译成用户的语言。
银格代码:

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

我们可以用同样的方式在我们的 html 页面本身翻译一个值:

<span>{{ 'ORDERS.Status' | translate}}</span>

我注意到，当翻译被加载时，ag grid 不会注意到翻译何时被加载。然而，html 页面本身的值会被翻译。
额外信息:ngx-translate 的翻译管道是一个“不纯”管道，这意味着它的值可以改变(例如，当所有翻译都加载时)
同样，当使用没有翻译的 headerName 时，它​​不会更新:
银格代码:

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

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

header 名称永远不会更新为“test-2”

Answer 1

演示.component.html

<ag-grid-angular style="width: 100%; height: 100%;" class="ag-theme-material" [rowData]="rowData"
    [columnDefs]="columnDefs" (gridReady)="onGridReady($event)" [pagination]="true">
</ag-grid-angular>

演示.component.ts

import { Component } from '@angular/core';
import { ColDef, GridApi } from 'ag-grid-community';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent {
  private gridApi: GridApi = null;

  public columnDefs: ColDef[] = [
    { headerName: "Code", field: 'code', sortable: true, resizable: true, headerValueGetter: this.localizeHeader.bind(this) },
    { headerName: 'Version', field: 'version', sortable: true, resizable: true, headerValueGetter: this.localizeHeader.bind(this) },
    { headerName: 'IsEnabled', field: 'isEnabled', sortable: true, resizable: true, headerValueGetter: this.localizeHeader.bind(this) }
  ];

  public rowData: any[] = [];

  constructor(private translateService: TranslateService) {
    this.translateService.onLangChange.subscribe(() => {
      this.gridApi.refreshHeader();
    })
  }

  public onGridReady(parameters: any): void {
    this.gridApi = parameters.api;
  }

  public localizeHeader(parameters: ICellRendererParams): string {
    let headerIdentifier = parameters.colDef.field;
    return this.translateService.instant(headerIdentifier);
  }
}