angular - 如何在 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 从后端获取列表“items”。

我的问题是:如何按翻译值对项目列表进行排序？

示例:

项目:

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