パイプ角2：オブジェクトの並べ替え

Question

似たような質問がありますが、私のために何も答えられていないので、これを重複としてマークしないと感謝します。私のテンプレートに

、私は

<tr class *ngFor="let media of (result) | orderBy: 'data.likes.count'"> 
    <td> 
    <img src={{media.data.images.standard_resolution.url}} height="100" width="100"> 
    <p> {{media.data.likes.count}} </p> 
    </td> 
</tr> 

を「好き」のカウント数に基づいて応答をソートしたいと思います：私は、これらの値で返されたオブジェクト result:Array<Object>=[];の配列を持っている

）の問題を解決

ソートパイプは次のようになります。

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

@Pipe({name: 'orderBy', pure: false}) 

export class SortPipe { 

    transform(array: Array<Object>, args: string): Array<Object> { 

    console.log("calling pipe"); 

    if (array == null) { 
     return null; 
    } 

    array.sort((a: any, b: any) => { 
     if (a[args] < b[args]){ 
     //a is the Object and args is the orderBy condition (data.likes.count in this case) 
      return -1; 
     }else if(a[args] > b[args]){ 
      return 1; 
     }else{ 
      return 0; 
     } 
    }); 
    return array; 
    } 
} 

私はこのコードを実行すると、それはむしろ、その後同類に基づいて、それを並べ替え、私の順不同の応答を示しています。私は、パイプ上でconsole.log(a[args])を実行すると、定義されていないので、オブジェクトフィールドの値を正しく読み取っていない可能性があることを指摘しておきます。

Answer 1

にする必要がありますが、その

のような引数を渡すことはできません。

array.sort((a: any, b: any) => { 
     if (a.data.likes[args] < b.data.likes[args]){ 
     //a is the Object and args is the orderBy condition (data.likes.count in this case) 
      return -1; 
     }else if(a.data.likes[args] > b.data.likes[args]){ 
      return 1; 
     }else{ 
      return 0; 
     } 
    }); 

そして、あなたのテンプレートで：

<tr class *ngFor="let media of (result) | orderBy: 'count'"> 

---

そして、あなたが本当に何をしたい場合あなたは（私は本当に落胆している）している、あなたはあなたのdata.likes.countを解析し、より深いobを返すためにヘルパーを使用する必要がありますject。

function goDeep(obj, desc) { 
    var arr = desc.split("."); 
    while(arr.length && (obj = obj[arr.shift()])); 
    return obj; 
} 

次にあなたが

array.sort((a: any, b: any) => { 
      let aDeep = goDeep(a,args); 
      let bDeep = goDeep(b,args); 
      if (aDeep < bDeep){ 
      //a is the Object and args is the orderBy condition (data.likes.count in this case) 
       return -1; 
      }else if(aDeep > bDeep){ 
       return 1; 
      }else{ 
       return 0; 
      } 
     }); 

のようにそれを使用することができますそして、あなたが望むように、あなたがそれを使用することができます。

<tr class *ngFor="let media of (result) | orderBy: 'data.likes.count'">