OrderBy

A custom “OrderBy” pipe lehetővé teszi az adatok rendezését egy megadott kulcs szerint. Alább található egy egyszerű példa erre:

orderby.pipe.ts

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

@Pipe({
  name: 'orderBy'
})
export class OrderByPipe implements PipeTransform {

  transform(array: any[], field: string, ascending: boolean = true): any[] {
    if (!Array.isArray(array)) {
      return array;
    }

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

    return array;
  }

}

Hogyan használjuk:

1. Adjuk hozzá az OrderByPipe-t a modul declarations tömbjéhez:

@NgModule({
  declarations: [
    // ... egyéb komponensek és pipe-ok
    OrderByPipe
  ],
  // ...
})
export class YourModule { }

2. A template-ben használjuk a pipe-ot a kívánt tömbön, és adjuk meg a rendezési kulcsot:

<ul>
  <li *ngFor="let item of itemsArray | orderBy:'name'">
    {{ item.name }}
  </li>
</ul>

Ebben a példában az itemsArray-t a name kulcs szerint rendezzük növekvő sorrendben. A ascending paramétert opcionálisan állíthatjuk be, alapértelmezetten true értékű.

További példák:

• Az elemek csökkenő sorrendben való rendezéséhez:

<ul>
  <li *ngFor="let item of itemsArray | orderBy:'name':false">
    {{ item.name }}
  </li>
</ul>

Emlékeztetőül: bár a custom pipe-ok hasznosak lehetnek, az Angular ajánlása szerint kerüljük a komplex adatműveleteket (például rendezés) a pipe-okban, mivel ezek jelentős teljesítménybeli hatással lehetnek az alkalmazásra. Egy nagy adattömb rendezése minden változáskor (különösen, ha a ChangeDetection stratégia Default-ra van állítva) nagy teljesítményű overhead lehet.