ngx - 变压和表排序

Question

im在我的Angular App中使用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>

但它打印"通用.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

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