在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链接: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

虽然您可以使用管道解决此问题,但您必须问自己,管道的可重用性是否对您的特定项目有用.您是否经常需要通过其他阵列或其他组件上的"名称"键对对象进行排序？这些数据是否会经常变化,并且难以简单地对组件进行排序？您是否需要对视图或输入的任何更改进行排序？

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

试试这个

从A到alpahbet的结尾排序:

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