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>

我需要翻译“名称”并保留排序属性。

我尝试过简单地：

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

但是它引发了很多异常，例如：错误错误：找不到ID为“名称”的列。

感谢您的帮助。

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>

Ngx-translate和表排序

2 个答案: