Ngx-translate 和 Table 排序

Question

我在我的 Angular 应用程序中使用 ngx-translate。

它运行良好，但不幸的是我找不到翻译 table 列 header 保持排序功能的解决方案。

这是我的列定义

 <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header="name" > Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

我需要翻译 "Name" 保持排序属性。

我简单地尝试过：

<ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef  mat-sort-header="name" translate> generic.name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

但它打印 "generic.name".

如果我删除：

mat-sort-header="name"

翻译有效，但我失去了 table 排序功能。

我试过这样的事情：

  <ng-container matColumnDef="{{ 'generic.name' | translate }}">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header="{{ 'generic.name' | translate }}" translate> generic.name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>>

但它引发了很多异常，例如：错误错误：找不到 ID 为 "name" 的列。

感谢您的帮助。

Answer 1

我不太喜欢 material and/or ngx-translate，但我认为你的最后一个代码片段是正确的，除了你试图翻译列 id 而不是它应该的文本展示。试试这个：

<ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef  mat-sort-header="name">{{ 'generic.name' | translate }}</th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>

Answer 2

如果我们只需要翻译 header，只在标签上使用翻译管道。

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef  mat-sort-header="name" > 
    {{'Name' | translate}} 
  </th>
  <td mat-cell *matCellDef="let element"> 
    {{element.name}} 
  </td>
</ng-container>

Ngx-translate 和 Table 排序

Ngx-translate and Table Sort

ngx-translate

angular