如何将 i18n 与 Angular mat-table 一起使用

Question

I cannot seem to translate dynamic column titles using i18n and Angular's mat-table.

I tried using i18n-title [title]="field.i18n" and i18n-header [header]="field.18n" and i18n-table-header table-header="field.i18n" without any success.

 <table mat-table [dataSource]="dataSource"> <ng-container *ngFor="let field of tableData" [matColumnDef]="field.name"> <th mat-header-cell *matHeaderCellDef [i18n]="field.i18n"> {{field.name}} </th> <td mat-cell *matCellDef="let element"> {{element[field.dbField]}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="getDisplayedColumns();"></tr> <tr mat-row *matRowDef="let row; columns: getDisplayedColumns();" ></tr> </table>

I would expect the column title to come from field.name using i18n templates.

Answer 1

i18n is not a directive. It doesn't exist at runtime.

It's just an attribute used at compile time to extract and reinsert the static values to translate from/into the template.

If you're trying to translate a key at runtime with Angular i18n, then too bad, because it's not supported.

Answer 2

I think you could use the localeId of the app, and create the labels in the component. Is not nice but at least it works.

constructor(@Inject(LOCALE_ID) protected localeId: string) {
      console.log(this.localeId);
}

And in your component you can assign the names of the headers depending the locale

if (this.localeId == 'de') {
/// Your code
}