Angular 6 的自定义排序管道答案

【问题标题】：Custom sorting pipe for Angular 6Angular 6 的自定义排序管道
【发布时间】：2023-04-04 18:36:02
【问题描述】：

我正在尝试在 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;
}

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

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

【问题讨论】：

angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe
@JBNizet 没有帮助...请指出我做错了什么...
请为 uLists 提供一些示例数据。快速说明：如果 uLIsts 是具有 lastUpdatedat 属性的对象列表，则您的管道可能不应该接受字符串数组。
明显的错误是您正在修改数组，而不是返回排序后的副本。但正如文章所解释的，您不应该有过滤器管道，也不应该有排序管道。如果您需要更多帮助，您需要明确定义“不起作用”。

标签： angular sorting angular2-custom-pipes

【解决方案1】：

这里的回答非常相似

Angular Custom Order Pipe sorting array correctly

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

祝你好运！

【讨论】：

【解决方案2】：

两个建议：

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

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

将您的模板更改为：

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

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

编辑

管道的数组参数显然不是Array<string>。如果您的数组中的对象具有特定类型，则参数应键入该Array<SomeObject>。如果没有，任何人都可以Array<any>，或者只是any。

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

【讨论】：

改变这个 orderbyLastMessagePipe:'desc' 也不会排序