Pipes Angular 2：对对象数组进行排序

Question

有类似的问题，但没有一个答案对我有用，所以如果您不将此标记为重复，我将不胜感激（除非您让我回答确实解决问题的问题）

我有一个对象数组result:Array<Object>=[];，它与这些值一起返回：

在我的模板上，我想根据“喜欢”的数量对回复进行排序

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

排序管道如下所示：

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 并返回更深层的对象。

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