Ngx-перевод и таблица сортировки - PullRequest
Новая
       19

Ngx-перевод и таблица сортировки

0 голосов
/ 02 июля 2019

Я использую ngx-translate в моем приложении Angular.

Это работает хорошо, но, к сожалению, я не могу найти решение для перевода заголовка столбца таблицы с сохранением функции сортировки.

Это мое определение столбца 

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

Но возникает много исключений, таких как: Ошибка Ошибка: Не удалось найти столбец с идентификатором «имя».

Спасибо за любую помощь.

Ответы [ 2 ]

1 голос
/ 02 июля 2019

Если нам нужно перевести только заголовок, используйте переводчик только на этикетке. 

<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>
0 голосов
/ 02 июля 2019

Я не очень часто использую материал и / или ngx-translate, но я думаю, что ваш последний фрагмент кода правильный, за исключением того, что вы пытаетесь перенести идентификатор столбца вместо текста, который должен отображаться.Попробуйте это: 

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