如何在 Angular mat-table 中使用 i18n

Question

我似乎无法使用 i18n 和 Angular 的 mat-table 翻译动态列标题。

我尝试使用 i18n-title [title]="field.i18n" 和 i18n-header [header]="field.18n" 和 i18n-table-header table-header="field.i18n" 没有任何成功。

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

我希望列标题来自 field.name 使用 i18n 模板。

Answer 1

i18n 不是指令。它在运行时不存在。

它只是在编译时用于提取和重新插入静态值以翻译 from/into 模板的属性。

如果您尝试在运行时使用 Angular i18n 翻译密钥，那就太糟糕了，因为它不受支持。

Answer 2

我认为您可以使用应用程序的 localeId，并在组件中创建标签。不太好，但至少可以用。

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

并且在您的组件中，您可以根据语言环境分配 headers 的名称

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

如何在 Angular mat-table 中使用 i18n

How to use i18n with Angular mat-table

angular

mat-table