Angular2ではngForがあり、orderby 1のフィールドがあります

Question

Angular2にはngForがあり、orderby 1のフィールドが必要ですがカスタムパイプを構築しません。

使用できるビルトインのものはありますか？私はitem.hasUnreadMessagesで注文したい

<tr *ngFor="let item of listOfMessages" [ngClass]="{unread: item.hasUnreadMessages}"> 

：

は、これは私のコードです。

しかし、私はこれを行う最も簡単な方法が欲しいです。

私はangular2とtypescriptですとHTML5を使用してい

私の試み：

this.listOfMessages = this.listOfMessages.sort((item1:any, item2:any): boolean => this.compareByBool(item1, item2, "hasUnreadMessages")); 


    compareByBool = (item1: any, item2: any, fieldName: any): any =>{ 
     return (item1[fieldName] === item2[fieldName] ? 0 : (item1[fieldName] ? -1 : 1)); 
    } 

これがtrueの場合：hasUnreadMessagesは、その項目が配列の先頭にあるべき

Answer 1

あなたがあなた自身のソートを実装して、依存

this.sortedItem = this.items.sort((item1, item2): number => compareByNumber(item1, item2, fieldName)); 

または

this.sortedItems = this.items.sort((item1, item2): number => compareByString(item1, item2, fieldName)); 

を行うことができますあなたのフィールドタイプには

function compareByNumber(item1, item2, fieldName){ 
    return item1[fieldName] - item2[fieldName]; 
} 
function compareByString(item1, item2, fieldName){ 
    return (item1[fieldName] < item2[fieldName] ? -1 : (item1[fieldName] === item2[fieldName] ? 0 : 1)); 
} 

function compareByBool(item1, item2, fieldName){ 
    return (item1[fieldName] === item2[fieldName] ? 0 : (item1[fieldName] ? -1 : 1)); 
} 

Answer 2

いいえ、あなたAngularチームによる決定なので、パイプを使用することはできません。誰もがAngularを責めにしているパフォーマンスには、あまりにも多くのトラブルがありましたが、これは部分的にしか正しくありませんでした。だから、彼らはそれを含めることを選択し、それのためのカスタムパイプを使用することをお勧めしません。

公式ドキュメントの詳細here代わりに何ができるかについても説明します。基本的にはorderedListOfMessages()のような独自の注文方法を書いて、コンポーネントの中のtypescript/javascriptでそれを行います。

しかし、非常に頻繁に起こりますので、基礎となるデータが変更されていないことがわかっている場合は、代わりに新しい変数orderedListOfMessagesを追加して、データが更新された直後に更新してください。

最初のアプローチは単純ですが、慎重に使用する必要があります（5〜20要素のように非常に単純で高速です）。

第2のアプローチはあまり複雑ではありませんが、より多くの労力が必要です。あなたはマウスの移動でページをオーバーロードしないことを確かめることができます。

この非常に単純なスニペットは、JSのboolean比較のために正常に動作するようです：

boolArray.sort(function(item1, item2){ return item1 ? 0 : 1});