Ngx 翻译和表格排序答案

【问题标题】：Ngx-translate and Table SortNgx 翻译和表格排序
【发布时间】：2025-12-09 00:40:01
【问题描述】：

我在我的 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>>

但它引发了很多异常，例如：ERROR 错误：找不到 id 为“name”的列。

感谢您的帮助。

【问题讨论】：

是否有一个选项可以显示与要排序的属性不同的内容？我认为如果没有这种选项，你也应该翻译你的列表对象的键。只是假设因为其他 data-table 之类的插件

标签： angular ngx-translate

【解决方案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>

【讨论】：

【解决方案2】：

我对材料和/或 ngx-translate 不太常用，但我认为您的最后一个代码 sn-p 是正确的，只是您尝试翻译列 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>

【讨论】：