如何在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

你不能使用内置的管道来过滤或者sort data。

但是，您可以通过编写自己的管道来实现。只需对数据进行翻译和排序即可。

Answer 3

您可以按pipe排序

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