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链接：https://plnkr.co/edit/e9laTBnqJKb8VzhHEBmn?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

虽然您可以使用管道解决此问题，但您必须问自己，管道的可重用性是否对您的特定项目有用。您是否经常需要按＆＃34; name＆＃34;对对象进行排序？关键在未来的其他阵列或其他组件？这些数据是否会经常变化，并且难以简单地对组件进行排序？您是否需要对视图或输入的任何更改进行排序？

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

Edited Plunker

Answer 2

您的管道需要字符串，但它会获取对象，您应该对其进行调整：

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 3

试试这个

从A到Alpahbet的结尾排序：

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

Z =＆gt; A（逆序）

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

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's答案，因为不建议在管道中进行过滤和排序。

Answer 6

很简单，例如，如果你有这个数组对象：

def sortfunction(alpha):
    return list(zip(*alpha))

In []:
cities, numbers = sortfunction([['AKRON', 65.5574], ['ALTON', 69.6722]])
cities

Out[]:
('AKRON', 'ALTON')

In []:
numbers

Out[]:
(65.5574, 69.6722)

并且您希望将对象排序在HTML前端，使用：

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

默认情况下，字符串按字母顺序排序，数字按数字排序。

如果你有这个带有键的数组：

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

使用：

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

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>

在Angular2中对对象数组进行排序

6 个答案: