Question

我有以下ngFor语句，我想按价格排序。 https://plnkr.co/edit/DC8I8DRB5UKhvWf6Sppl?p=preview

<div *ngFor="let coin of keys(); let i = index;">{{feeds[coin].price}}</div>

export class PricingTableComponent{

  public feeds:  FeedItemDictionary = {};

  constructor(service: PricingApiService,private route:ActivatedRoute) {   

      this.feeds["btc"] = {price : 1,coin : "BitCoin"} ;
      this.feeds["eth"] = {price : 2,coin : "Etherium"} ;
      //... 1300 like this...
    });
  }

  keys() {
    return Object.keys(this.feeds);
  }
}

interface FeedItemDictionary {
  [ index: string ]: FeedItem // price and coin memebers
}

问题是这是一本字典（我必须使用字典或地图）是否可以按值成员排序？
你可以在plnkr中修复我的例子吗？谢谢

Answer 1

你可以使用烟斗：

@Pipe({
  name: 'SortBy'
})
export class IeSortPipe implements PipeTransform {

  transform(values: Array<string>, args?: string): any {

  if(args==='ASC')
    values = values.sort();
    else
    values = values.sort().reverse();

    return values;
  }
}

我在你的代码中添加了排序管道：

https://plnkr.co/edit/L6Wk2GlsRb53RsNUeurx?p=preview

Answer 2

首先，我不会在模板中调用方法，为什么？这意味着将在每次更改检测时调用此方法，通常是：*ngFor running an infinite loop in angular2在最坏的情况下，这可能会导致浏览器崩溃。

您可以使用管道进行订购，但我不会使用它，在文档中也会提到为什么没有内置订单或过滤管道：https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

我要做的是处理组件中的所有业务逻辑，然后在模板中迭代一个数组。因此，我首先要对您的数据进行迭代以及对其进行排序：

ngOnInit() {
  let keyArr: any[] = Object.keys(this.feeds)
  keyArr.forEach((key: any) => {
    // push object with abbreviation, price and coin to array
    this.myArray.push({ abbrv: key, price: this.feeds[key].price, coin: this.feeds[key].coin });
  });
  // ASC
  this.myArray = this.myArray.sort((a, b) => a.price - b.price)
}

有了这个，你最终得到一个像：

这样的数组

[{abbrv: "eth", price: 54115, coin: "Etherium"}, ....]

然后在您的模板中，您只需迭代myArray：

<div *ngFor="let item of myArray">
  {{item.abbrv}} = {{item.price}}
</div>

<强> StackBlitz

Answer 3

要按coin字符串排序，请将keys功能更改为以下内容：

keys()  {
   return Object
     .keys(this.feeds)
     .sort((a, b) => this.feeds[a].coin.localeCompare(this.feeds[b].coin));
}

但是，如果要按price（升序）的值排序，请将其更改为以下内容：

keys()  {
   return Object
     .keys(this.feeds)
     .sort((a, b) => this.feeds[a].price - this.feeds[b].price));
}

通过ngfor进行角度排序

3 个答案: