排序Angular2中的一系列对象

Question

我在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"
  }
]

并存储在values变量中。

我想要的就是使*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>

试图用管道做，但失败了。任何帮助。

plunker link ：https：//plnkr.co/edit/e9latbnqjkbb8vzhhebmn?p=preview

编辑

我的管道：

import {Component, Inject, OnInit, Pipe, PipeTransform} from '@angular/core';
@Component({
  selector: 'watchlist',
  templateUrl: './watchlist.component.html',
  styleUrls: ['./watchlist.component.css'],
  pipes: [ ArraySortPipe ]
})
@Pipe({
  name: "sort"
})
export class ArraySortPipe implements PipeTransform {
  transform(array: Array<string>, args: string): Array<string> {
    array.sort((a: any, b: any) => {
      if (a < b) {
        return -1;
      } else if (a > b) {
        return 1;
      } else {
        return 0;
      }
    });
    return array;
  }
}

，然后将pipe名称放入HTML文件：

<tr *ngFor="let elem of values | sort">

Answer 1

尽管您可以用管道解决此问题，但您必须问自己，在特定项目中，管道的可重复使用性对您是否有用。将来，您通常需要在其他阵列或其他组件上按"名称"键进行对象？这些数据会经常发生足够的变化，并且以使组件中的简单排序很难的方式吗？您是否需要对视图或输入的任何更改进行排序的数组？

我创建了一个编辑的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;
  });
}

编辑的plunker

Answer 2

尝试此

从alpahbet的A到末端排序：

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

z => a（反向顺序）

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

Answer 3

您的管道期望字符串，但它有对象，您应该对其进行调整：

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;
  }
}

Answer 4

Angular仍然建议不要使用管道进行排序和过滤，例如在AngularJs中。

它将减慢您的应用程序，遇到一些性能问题。在将组件传递到模板之前，将您的分类提供在组件中要好得多。

原因在https://angular.io/guide/pipes#no-filter-pipe

上解释

如果您使用一个不错的结构化组件布局，即使在te setter上也可以这样做：

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

Answer 5

这对任何此类用户酶都可以适应。

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
    })
  }
}

用法： -
<div *ngFor="let item of list | sortBy: 'isDir': true">

更新
不建议将BO的答案作为过滤和分类。

Answer 6

它很简单，例如，如果您有此数组对象：

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

，您想将对象排序在HTML方面，使用：

 <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"}
];

使用：

按"城市" desc订单对数组进行排序：

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