Question

我有一个自定义管道，该管道通过数字类型的prop对对象数组进行排序。

使用管道的模板

<div *ngFor="let product of products | orderBy:'price'">

OrderByPipe

export class OrderByPipe  implements PipeTransform {
transform(array: any[], field: string): any[] {
array.sort((a: any, b: any) => {
  if (a[field] < b[field]) {
    return -1;
  } else if (a[field] > b[field]) {
    return 1;
  } else {
    return 0;
  }
});
return array;
}
}

当我使用forEach遍历每个项目时，管道似乎适用于较小的数组。但是，当我在最后对控制台进行控制台并在模板中将其返回时，该阵列仍处于混乱状态。

我不确定是什么原因造成的，谢谢。

Answer 1

也许您根本不需要管道，而您的组件中也需要服务

originalProducts;
orderedProducts;

ngOnInit() {
    this.getProducts();
}

getProducts() {
  this.productsService.getProducts()
    .subscribe((data) => {
    this.originalProducts = data;
    this.sortBy('price');  
  });
}

sortBy(field: string) {

        this.originalProducts.sort((a: any, b: any) => {
            if (a[field] < b[field]) {
                return -1;
            } else if (a[field] > b[field]) {
                return 1;
            } else {
                return 0;
            }
        });
        this.orderedProducts = this.originalProducts;
}

在您的模板中

<div *ngFor="let product of orderedProducts">

如果您的列表太长，请使用分页。

如果仍然遇到问题，请使用lodash。

祝你好运！

Answer 2

数组的内容是什么？如果它们是对象（看起来很可能），那么您将需要实现一个比较器-一个可以比较这些对象的两个实例的函数。小于（<）和大于（>）运算符可能未达到您的期望或期望。

正确的角度自定义订单管道排序数组

2 个答案: