以角度 7 对数据进行排序答案

【问题标题】：Sorting data in angular 7以角度 7 对数据进行排序
【发布时间】：2019-11-09 04:57:00
【问题描述】：

我需要按角度对标签进行排序。我正在从 component.ts 文件中进行操作。排序工作正常。它对标签的键值进行排序。但我的应用程序有两种语言。所以当我切换到另一种语言时，使用 key 对其进行排序不起作用。有没有办法可以用任何语言对其进行排序

getlabel(Id: string): Observable<Dto[]> {
return this.httpClient
  .get(
    url
  )
  .pipe(
    map((data: any) => {
      data.sort((a, b) => {
        return a.label > b.label ? 1 : -1
      })
      return data
    })

  ) as Observable
}

【问题讨论】：

如果可能，请考虑提供Minimal, Reproducible Example。这样，SO 上的志愿者更有可能为您提供帮助。

标签： angular sorting multilingual translate

【解决方案1】：

使用localeCompare函数：

.pipe(
    map((data: any) => {
      return data.sort((a, b) => {
        return a.label.localeCompare(b.label, 'he');
      })
    })
  ) as Observable

'he' 是希伯来语，把它改成你的language code

Stackblitz DEMO

【讨论】：

这是希伯来语
我有两种语言 en 和 fr
你知道当前每次显示的语言是什么吗？您写“当我切换到另一种语言时”，当您切换语言时，将其保存在局部变量中并将其传递给 localeCompare func
好的，我想出了如何使用区域设置比较以两种语言进行排序，但是在我重新加载页面之前，排序不会发生变化。假设它的英文排序，然后当我点击法语时，它会一直保持英文排序，直到我重新加载页面
我想我必须使用 onLanguagechange 但我可以在服务中使用它

【解决方案2】：

这适用于不同语言的排序

.pipe(
    map((data: any) => {
      data.sort((a, b) => {
        return this.translate
          .instant(a.label)
          .localeCompare(this.translate.instant(b.label))
      })
      return data
    })
  ) as Observable

【讨论】：

【解决方案3】：

传递输入数组中存在的键。

function sortByKey(array: [], key: any, sortType = '') {
  if (!array.length) {
     return array;
  }

   return array.sort((a, b) => {
     if (sortType === 'desc') {
          if (b[key] < a[key]) { return -1; }
          if (b[key] > a[key]) { return 1; }
      } else {
          if (a[key] < b[key]) { return -1; }
          if (a[key] > b[key]) { return 1; }
      }

      return 0;
  });
}

【讨论】：