Ngx-translate和表排序

Question

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

它工作得很好，但不幸的是，我找不到一个解决方案来翻译一个保持排序功能的表列标题。

这是我的列定义

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

翻译可以工作，但我失去了表排序功能。

我尝试过这样的东西：

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

但是它会引发很多异常，比如: ERROR Error:找不到id为"name“列。

谢谢你的帮助。

Answer 1

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

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

Answer 2

我对material和/或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>