按字母顺序排序 Angular

Question

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

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

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

琥珀色天使约翰洛基山姆

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

非常感谢

Answer 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>

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

按字母顺序排序 Angular

Alphabetically sort in Angular

sorting

alphabetical

alphabetical-sort

angular