在 Angular 中按字母顺序排序答案

【问题标题】：Alphabetically sort in Angular在 Angular 中按字母顺序排序
【发布时间】：2020-08-08 14:04:14
【问题描述】：

我是 Angular 的新手，如果这个问题被重复，我很抱歉，但我找不到我正在寻找的答案。我有一个包含下一个 JSON 的文件：

   {"name": "John", "size" : "small"},
   {"name": "Rocky", "size" : "small"},
   {"name": "Angel", "size" : "small"},
   {"name": "Amber", "size" : "small"},
   {"name": "Sam", "size" : "small"}

我想创建一个管道，以便我可以仅显示名称，但按字母顺序显示。应该是这样的：

琥珀天使约翰洛基山姆

或者……除了使用管道还有其他方法吗？

非常感谢

【问题讨论】：

试试data.sort((a, b) => a.name.localeCompare(b.name)).map(x => x.name)
嗨@KunalMukherjee，当我尝试它时，我收到此错误：HomeComponent.html:9 错误类型错误：data.sort 不是 CitiesSortPipe.transform (cities-sort.pipe.ts:11) 的函数在 checkAndUpdatePureExpressionInline (core.js:34390) ...

标签： angular sorting alphabetical alphabetical-sort

【解决方案1】：

如果您想创建一个管道来执行此操作，请按照以下代码：

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "nameConcat"
})
export class NamePipe implements Pipetransform {
  transform(value: any[], ...args: any[]) {
    const sorted = [...value].sort((a, b) => (a.name > b.name ? 1 : -1));
    return sorted.map((item) => item.name).join(" ");
  }
}

并像这样使用它：

<p>{{data | nameConcat}}</p>

这是一个代码框：https://codesandbox.io/s/stupefied-bash-remov?fontsize=14&hidenavigation=1&theme=dark

【讨论】：

我有一个非常相似的解决方案，我在我的一个工作中创建，但请注意这只是一个字母排序。如果您想要正确的数字排序，则必须先转换值。
感谢所有人，但特别感谢您的回答。这对我很有帮助。