Angular 6 的自定义排序管道

Question

我正在尝试在 ngFor 循环中对我的数据进行排序，但我的自定义管道无法按预期工作，任何人都可以帮助我...

  export class OrderbyLastMessagePipe implements PipeTransform {

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

    if (array !== undefined && array !== null && args !== '') {

      console.log('args', array);

        const direction = args === 'desc' ? 1 : -1;
        array.sort((a: any, b: any) => {

          console.log('args', a);

          if (a['lastUpdatedat'] < b['lastUpdatedat']) {
                return -1 * direction;
            } else if (a['lastUpdatedat'] > b['lastUpdatedat']) {
                return 1 * direction;
            } else {
                return 0;
            }
        });
    }
    return array;
}

我的组件 ng 容器是这个，我使用两个过滤器，一个用于搜索，另一个用于对特定的 lastupdatedat 值进行排序，该值是时间戳...

 <ng-container *ngFor="let User of uLists | orderbyLastMessage:'uLists':true">

Answer 1

两条建议：

如果您使用 angular CLI 生成管道，则 name 是 orderByLastMessagePipe。您可以在您的代码中看到这一点：

@Pipe({name: 'orderByLastMessagePipe'})
您传递给管道的参数将始终使其按升序排序。使用 angular 管道，多个参数由 : 分隔。 orderbyLastMessage:'uLists':true" 应该是 orderbyLastMessage:'desc' 进行降序排序，orderbyLastMessage 进行升序排序，或者 orderbyLastMessage:'asc'.

将您的模板更改为：

<ng-container *ngFor="let User of uLists | searchUser:filterUser | orderbyLastMessagePipe:'desc'">

看看这是否解决了您的排序问题。

编辑

你管道的数组参数显然不是Array<string>。如果数组中的对象具有特定类型，则参数类型应为 Array<SomeObject>。如果没有，any 会做 Array<any>，或者只是 any.

由于前面评论中指出的性能不佳，此答案不是正确的排序方法。只是试图回答所提出的具体问题。

Answer 2

这里的回答非常相似

用户搜索必须使用输入类型文本、按键事件和 array.filter 方法完成。

祝你好运！

Angular 6 的自定义排序管道

Custom sorting pipe for Angular 6

sorting

angular2-custom-pipes

angular