自定义 OrderPipe 在 angular 4 中不起作用？

Question

我已经创建了一个自定义管道来对对象数组进行排序，但该管道无法正常工作？我的 [ {name , population , variable }] 数组。我想根据 population

对对象数组进行排序

管道：

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

     @Pipe ({
    name:'order'
    })

    export class OrderByPipe implements PipeTransform{
    transform(value: any[], property: any, descending?: boolean): any {
    if (!value || value.length) {
      return value;
    }

    value.sort((first: any, second: any): number => {
        return first[property] > second[property] ? 1 : -1;
    });

    if (descending) {
      return value.reverse();
    }

    return value;
  }
}

HTML:

 <ul>
 <li *ngFor="let items of results"
   {{items.name | order:'population':'true'  }}
</li>
</ul>

Answer 1

您正在将 items.name 传递给管道。

这是 string 没有属性 population。

Answer 2

你应该有这样的

<li *ngFor="let items of results | order:'population':'true'">
   {{items.name}}
</li>

你的管道也有问题你需要检查数组的长度为0，否则它总是return相同的数组而不排序

 if (!value || value.length == 0) {
      return value;
 }

DEMO

Answer 3

我找到了一个很棒的 npm 包，其中包含一些常见的可重用管道。可以使用 https://github.com/danrevah/ngx-pipes#orderby?

自定义 OrderPipe 在 angular 4 中不起作用？

Custom OrderPipe is not working in angular 4?

angularjs-orderby

angular