角2.注文の仕方は？

Question

私はコードを持っています。アンギュラ1では

<table class="table table-bordered table-condensed" cellpadding="0" cellspacing="0"> 
 
    <thead> 
 
     <tr> 
 
      <th>#</th> 
 
      <th>Name</th> 
 
      <th>Score</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr *ngFor="#participant of participants; #i = index"> 
 
      <td>{{i+1}}</td> 
 
      <td>{{participant.username}}</td> 
 
      <td>{{participant.score}}</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

私は私のフィルタで行を注文するORDERBYフィルタを持っています。しかし、どのように私は同じ方法で角度2でorderByを行うことができますか？ありがとうございました。

Answer 1

このためにカスタムパイプを実装する必要があります。 @Pipeで装飾されたクラスを作成することに対応します。ここにサンプルがあります。その変換方法は、実際にリストを処理すると、あなたが望むようにそれを並べ替えることができるようになります：式の中で以下のよう

import { Pipe } from "angular2/core"; 

@Pipe({ 
    name: "orderby" 
}) 
export class OrderByPipe { 
    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; 
    } 
} 

あなたは、このパイプを使用することができます。たとえば、ngForで指定します。あなたはそれを使用するコンポーネントのpipes属性にあなたのパイプを指定することを忘れないでください：

@Component({ 
    (...) 
    template: ` 
    <li *ngFor="list | orderby"> (...) </li> 
    `, 
    pipes: [ OrderByPipe ] 
}) 
(...) 

Answer 2

は、あなたの答えをいただき、ありがとうございます。私は、以下の実行可能なコードを書かれている：

@Pipe({name: 'orderBy'}) 
 

 
export class orderBy implements PipeTransform { 
 
    transform(obj: any, orderFields: string): any { 
 
     orderFields.forEach(function(currentField) { 
 
      var orderType = 'ASC'; 
 

 
      if (currentField[0] === '-') { 
 
       currentField = currentField.substring(1); 
 
       orderType = 'DESC'; 
 
      } 
 

 
      obj.sort(function(a, b) { 
 
       if (orderType === 'ASC') { 
 
        if (a[currentField] < b[currentField]) return -1; 
 
        if (a[currentField] > b[currentField]) return 1; 
 
        return 0; 
 
       } else { 
 
        if (a[currentField] < b[currentField]) return 1; 
 
        if (a[currentField] > b[currentField]) return -1; 
 
        return 0; 
 
       } 
 
      }); 
 

 
     }); 
 
     return obj; 
 
    } 
 
}

このコードを順方向DESCまたはASC考えます。使用方法：

<tr *ngFor="#participant of participants | orderBy: '-score'; #i = index">

Answer 3

あなたがlodashを使用している場合は、あなたのパイプはこのようなことができます：

import { Pipe, PipeTransform } from '@angular/core'; 
import { orderBy } from 'lodash'; 

@Pipe({ 
    name: 'orderBy' 
}) 
export class OrderByPipe implements PipeTransform { 
    transform = orderBy; 
} 

そして、あなたは方法のすべての電源を使用することができます

を

<li *ngFor="let product of products | orderBy: 'price': 'desc'"> 
    {{product.name}} 
</li>