管道角度2:对对象数组进行排序 [英] Pipes Angular 2: Sort Array of Objects

问题描述

也有类似的问题，但没有一个答案对我有帮助，因此，如果您不将其标记为重复(除非您让我回答确实能够解决问题的问题)，我将不胜感激.

There are similar questions but none of the answers have done the trick for me, so I would appreciate if you don't mark this as duplicate (unless you refer me to answer question that does solve the issue)

我有一个对象数组result:Array<Object>=[];，该数组返回以下值:

I have a Array of Objects result:Array<Object>=[]; which is returned with these values:

在我的模板上，我想根据喜欢"的数量对响应进行排序

On my template, I would like to sort the response based on count of 'likes'

<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])时，会得到不确定的信息，因此我可能无法正确读取对象字段中的值.

When I run this code, it shows me an unordered response, rather then sorting it based on the likes. I should point that that when I do console.log(a[args]) on the pipe I get undefined so I am probably not reading the value in the object field correctly.

推荐答案

您不能传递像这样的args

You can't pass args like that

应该是:

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

---

And if you really want to do what you're doing ( I really discourage ) , you need to use a helper to parse your data.likes.count and return the deeper object.

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;
            }
        });

然后您可以根据需要使用它；

And then you can use it like you wanted ;

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

这篇关于管道角度2:对对象数组进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！