如何在Angular 5中对翻译列表进行排序（ngx-translate）

Question

我们说我有以下简单的html代码（Angular 5，ngx-translate）：

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

我得到了列表＆＃39; items＆＃39;从后端通过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>