Угловая сортировка массива труб под заказ

Question

У меня есть специальный канал, который упорядочивает массив объектов с помощью опоры, имеющей номер типа.

Шаблон, где используется труба

<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

Каково содержимое массивов? Если они являются объектами (что кажется вероятным), то вам нужно будет реализовать компаратор - функцию, которая может сравнивать два экземпляра этих объектов. Операторы меньше (<) и больше (>) могут делать не то, что вы ожидаете или хотите.