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

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

UPDATE
請參考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>