Как отсортировать переведенный список в Angular 5 (ngx-translate)

Question

Допустим, у меня есть следующий простой html-код (Angular 5, ngx-translate):

<div>
    <div *ngFor="let item of items">
        <div>{{item | translate}}</div>
    </div>
</div>

Я получаю список "элементов" из бэкэнда через http-get.

Мой вопрос: как я могу отсортировать список элементов по их переведенным значениям?

Пример:

Предметы:

[ "lbl_a", "lbl_b", "lbl_c" ]  

с переводами:

{
    "lbl_a": "tree",
    "lbl_b": "zoo",
    "lbl_c": "car"
}

Тогда я хочу отобразить:

car
tree
zoo

(отсортировано по алфавиту)

Answer 1

Вы можете создать трубу или отсортировать элементы, когда получите их.

this.service.getTranslatedItems().subscribe(items => {
  this.items = items.sort((a, b) => a.localeCompare(b));
});

С трубой

transform(items: string[]) {
  return items.sort((a, b) => a.localeCompare(b));
}

И в вашем HTML (только труба)

<div *ngFor="let item of items | yourPipeName">
    <div>{{item | translate}}</div>
</div>

Answer 2

Вы не можете использовать встроенные каналы для фильтрации или сортировки данных.

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

Answer 3

Вы можете отсортировать по трубе

  <div *ngFor="let item of items | orderBy : 'columnname']"">
        <div>{{item | translate}}</div>
    </div>