如何以角度翻译 ag-grid 的动态标题答案

【问题标题】：how do translate the Dynamic header of ag-grid in angular如何以角度翻译 ag-grid 的动态标题
【发布时间】：2022-01-23 11:14:13
【问题描述】：

我只是这样尝试，我不知道它在 en.json 或 otherlanguage.json 文件中是如何工作的

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);
  }
}

谁能告诉我 en.json 或 es.json 文件应该是怎样的

【问题讨论】：

标签： angular ag-grid-angular

【解决方案1】：

快速解决方法

在.ts中

public tableColumnsEn
public tableColumnsEs

在.html中

<ag-grid-angular [columnDefs]="tableColumnsEn"></ag-grid-angular>

然后可以观察到语言变化

this.translateService.onLangChange.subscribe((lang) => {
  
  if (lang == 'en') ? this.tableColumns = [...tableColumnsEn] : [...tableColumnsEs]
})

更通用的方法是这样的： .ts

 this.translateService.getStreamOnTranslationChange
.subscribe((stream) => {
      tableColumns.forEach((t) => {
       stream.forEach((key) => {
        if (t.headerName == key) t.headerName = key
      })
    })
  })

【讨论】：