Javascript 按Angular2对对象数组进行排序

我对Angular2中的对象数组排序有问题

该对象看起来像：

[
  {
    "name": "t10",
    "ts": 1476778297100,
    "value": "32.339264",
    "xid": "DP_049908"
  },
  {
    "name": "t17",
    "ts": 1476778341100,
    "value": "true",
    "xid": "DP_693259"
  },
  {
    "name": "t16",
    "ts": 1476778341100,
    "value": "true",
    "xid": "DP_891890"
  }
]

并且存储在

值

变量中

我只想让

*ngFor

循环按

name

属性对其排序

<table *ngIf="values.length">
    <tr *ngFor="let elem of values">
      <td>{{ elem.name }}</td>
      <td>{{ elem.ts }}</td>
      <td>{{ elem.value }}</td>
    </tr>
</table>

---

管道需要字符串，但需要对象，您应该调整它：

export class ArraySortPipe implements PipeTransform {
  transform(array: Array<any>): Array<string> {
    array.sort((a: any, b: any) => {
      if (a.name < b.name) {
        return -1;
      } else if (a.name > b.name) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

导出类ArraySortPipe实现PipeTransform{
变换（数组：数组）：数组{
array.sort（（a:any，b:any）=>{
如果（a.nameb.name）{
返回1；
}否则{
返回0；
}
});
返回数组；
}
}

尽管你可以用管道解决这个问题，但你必须问问自己，管道的可重用性是否对你的特定项目有用。将来您是否经常需要在其他数组或其他组件上按“name”键对对象进行排序？这些数据的变化是否足够频繁，并且其方式是否会使在组件中进行简单排序变得困难？是否需要根据视图或输入的任何更改对数组进行排序

我创建了一个编辑过的plunker，其中数组在组件的构造函数中进行排序，但是没有理由不能将此功能移到它自己的方法（例如sortValuesArray）中，以便在必要时重用

constructor() {
  this.values.sort((a, b) => {
    if (a.name < b.name) return -1;
    else if (a.name > b.name) return 1;
    else return 0;
  });
}

constructor（）{
this.values.sort（（a，b）=>{
如果（a.nameb.name）返回1；
否则返回0；
});
}

---

这适用于任何此类用例

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

@Pipe({
  name: 'sortBy'
})
export class SortByPipe implements PipeTransform {
  transform(arr: Array<any>, prop: any, reverse: boolean = false): any {
    if (arr === undefined) return
    const m = reverse ? -1 : 1
    return arr.sort((a: any, b: any): number => {
      const x = a[prop]
      const y = b[prop]
      return (x === y) ? 0 : (x < y) ? -1*m : 1*m
    })
  }
}

从'@angular/core'导入{Pipe，PipeTransform}；
@烟斗({
名称：“sortBy”
})
导出类SortByPE实现PipeTransform{
转换（arr：数组回答，因为不建议在管道中进行过滤和排序。
尝试此操作

从A到alpahbet末尾排序：

this.suppliers.sort((a,b)=>a.SupplierName.localeCompare(b.SupplierName));

Z=>A（顺序相反）

angularJs仍然建议不要像angularJs那样使用管道进行排序和过滤

它会降低应用程序的速度，会出现一些性能问题。在将组件传递到模板之前，最好在组件中提供排序

原因解释如下

如果您使用良好的结构化组件布局，您甚至可以在te setter上使用：

 @Input()
  set users(users: Array<User>) {
    this.usersResult = (users || []).sort((a: User, b: User) => a.name < b.name ? -1 : 1)
  }

@Input（）
设置用户（用户：数组）{
this.usersResult=（users | |[]）.sort（（a:User，b:User）=>a.name
它很简单，例如，如果您有以下数组对象：

 cars = ["Dodge", "Fiat", "Audi", "Volvo", "BMW", "Ford"];

如果要在HTML前端对对象进行排序，请使用：

 <li ng-repeat="x in cars | orderBy">{{x}}</li>

使用：

按“城市”描述顺序对数组排序：

<li ng-repeat="x in customers | orderBy : '-city'">{{x.name + ", " + x.city}}</li>

{{x.name+，“+x.city}

按“城市”对数组排序：

{{x.name+”，“+x.city}
到目前为止你尝试了什么？你能在这里添加你尝试编写的管道吗？@toskv我制作的管道工作不正常，但我会尽快在编辑中添加它。谢谢。显示你的工作对于人们能够帮助你很重要。：）由于您是新手，如果您还没有阅读“如何询问”指南，可能值得一读。也许您应该尝试对name属性进行排序。在管道中的箭头函数中，do和a.name类型的参数'{选择器：字符串；模板：任意；样式：任意[]；管道：ArraySortPipe的类型[]；}'不可分配给'Component'类型的参数。Object literal可能只指定已知属性，而'Component'类型中不存在'pipes'。

可能是由于签名的原因，将其更新为接受数组，请尝试一下。下面是几乎整个

Component.ts

文件以及出现的错误：它仍然很简单错误，即使我已经改变了你所说的一切。错误是由于JSFIDLE上的编译问题造成的，还是我遗漏了什么？为什么不分叉并修复原始的plnkr？这个错误来自于编译应用程序时的webpack。我现在使用了JSFIDLE，因为我在plunker上发布了我的代码的最小和非常简化的版本，没有http请求。如果你愿意，我可以编辑原始的plunker，我的朋友。谢谢你，但这不是我想要的。在某些情况下，代码可能更简单，比如

constructor（）{this.values.sort（函数（a，b）{return a.ts-b.ts}；}

或

constructor（）{this.values.sort（（a，b）=>{return a.ts-b.ts}）；}

此方法的论点如下："Angular不提供此类管道，因为它们的性能很差……过滤，尤其是排序是昂贵的操作。当Angular每秒多次调用这些管道方法时，即使是中等大小的列表，用户体验也会严重降低。在AngularJS应用程序中，filter和orderBy经常被滥用，导致Angul抱怨ar本身很慢……Angular团队和许多经验丰富的Angular开发人员强烈建议将过滤和排序逻辑移动到组件本身中。“最简单的答案是有效的，不值得投反对票。不要投反对票，但对代码进行一些解释会有所帮助。

A=>Z

这是箭头函数的简写吗？也许可以澄清一下“localeCompare”是用于包含语言特定字符的内置方法吗？这在将subscribe放在构造函数中时对我有效：This.foo.getBar（）.subscribe（x=>{This.thing=x；This.thing=（This.thing | |[]）.sort（（a:thing，b:thing）=>a.name.localeCompare（b.name））；）；我看到a=>z的东西是文本。有一段时间完全混淆：）@RinandLen'localeCompare'根据顺序返回负值、正值或零值。然后排序函数使用这些值对其进行排序。显然ng repeat适用于angularJs的旧版本，对于最近的使用*ngForIt仍然不是一个好的做法，无论是在Angular1.x还是angular 2中+什么是“userResult”（除了您编写的var之外）？它是

 cars = ["Dodge", "Fiat", "Audi", "Volvo", "BMW", "Ford"];

 <li ng-repeat="x in cars | orderBy">{{x}}</li>

customers = [
{"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
{"name" : "Alfreds Futterkiste", "city" : "Berlin"},
{"name" : "Bon app", "city" : "Marseille"},
{"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"},
{"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
{"name" : "Around the Horn", "city" : "London"},
{"name" : "B's Beverages", "city" : "London"}
];

<li ng-repeat="x in customers | orderBy : '-city'">{{x.name + ", " + x.city}}</li>

<li ng-repeat="x in customers | orderBy : 'city'">{{x.name + ", " + x.city}}</li>