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

要实现根据翻译后的值排序items列表，核心是先获取每个item对应的翻译文本，再基于这些文本对原数组排序。这里分几个步骤来实现：

1. 基础实现：组件内维护排序后的数组 #

因为ngx-translate的翻译加载是异步的，我们需要先拿到所有items对应的翻译结果，再进行排序。同时要考虑语言切换的场景，确保切换语言后列表能重新排序：

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-your-component',
  template: `
    <div>
      <div *ngFor="let item of sortedItems">
        <div>{{item | translate}}</div>
      </div>
    </div>
  `
})
export class YourComponent implements OnInit {
  items: string[] = ["lbl_a", "lbl_b", "lbl_c"];
  sortedItems: string[] = [];

  constructor(private translateService: TranslateService) {}

  ngOnInit(): void {
    // 监听语言变化，切换语言时自动重新排序
    this.translateService.onLangChange.subscribe(() => {
      this.sortItemsByTranslation();
    });

    // 组件初始化时执行第一次排序
    this.sortItemsByTranslation();
  }

  private sortItemsByTranslation(): void {
    // 一次性获取所有items对应的翻译值
    this.translateService.get(this.items).subscribe(translations => {
      // 复制原数组避免修改原始数据，然后按翻译文本排序
      this.sortedItems = [...this.items].sort((a, b) => {
        // 转小写实现大小写不敏感排序，用localeCompare处理自然语言排序
        const transA = translations[a].toLowerCase();
        const transB = translations[b].toLowerCase();
        return transA.localeCompare(transB);
      });
    });
  }
}

2. 关键逻辑说明 #

• 异步获取翻译：translateService.get(this.items)会返回一个Observable，里面包含所有item对应的翻译结果对象（比如{ lbl_a: "tree", lbl_b: "zoo", lbl_c: "car" }）。
• 数组排序：通过扩展运算符[...this.items]复制原数组，避免直接修改原始数据；用localeCompare()方法实现符合自然语言规则的字符串排序，转小写是为了忽略大小写差异。
• 语言切换适配：监听onLangChange事件，确保用户切换语言时，列表能自动重新排序并更新展示。

3. 简化版：使用Async管道 #

如果不想在组件内维护sortedItems变量，可以把排序逻辑包装成Observable，在模板中用async管道自动处理订阅：

// 组件代码
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Observable, switchMap, map } from 'rxjs';

@Component({
  selector: 'app-your-component',
  template: `
    <div>
      <div *ngFor="let item of sortedItems$ | async">
        <div>{{item | translate}}</div>
      </div>
    </div>
  `
})
export class YourComponent implements OnInit {
  items: string[] = ["lbl_a", "lbl_b", "lbl_c"];
  sortedItems$!: Observable<string[]>;

  constructor(private translateService: TranslateService) {}

  ngOnInit(): void {
    // 构建排序后的Observable，自动响应语言变化
    this.sortedItems$ = this.translateService.onLangChange.pipe(
      // 初始时先触发一次
      startWith(null),
      switchMap(() => this.translateService.get(this.items)),
      map(translations => {
        return [...this.items].sort((a, b) => {
          return translations[a].toLowerCase().localeCompare(translations[b].toLowerCase());
        });
      })
    );
  }
}

这样处理后，你的列表就会按照翻译后的文本（比如car, tree, zoo）的顺序展示了。

内容的提问来源于stack exchange，提问作者xelor