Angular n'est pas livré avec un filtre orderBy prêt à l'emploi, mais si nous décidons d'en avoir besoin, nous pouvons facilement en créer un. Il y a cependant quelques mises en garde dont nous devons tenir compte concernant la vitesse et la minification. Voir ci-dessous.
Un simple tuyau ressemblerait à quelque chose comme ça.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sort'
})
export class SortPipe implements PipeTransform {
transform(ary: any, fn: Function = (a,b) => a > b ? 1 : -1): any {
return ary.sort(fn)
}
}
Ce tube accepte une fonction de tri ( fn) et lui donne une valeur par défaut qui triera un tableau de primitives de manière sensible. Nous avons la possibilité de remplacer cette fonction de tri si nous le souhaitons.
Il n'accepte pas un nom d'attribut sous forme de chaîne, car les noms d'attribut sont sujets à une minification. Ils changeront lorsque nous réduirons notre code, mais les minificateurs ne sont pas assez intelligents pour minimiser également la valeur dans la chaîne de modèle.
Tri des primitives (nombres et chaînes)
Nous pourrions l'utiliser pour trier un tableau de nombres ou de chaînes en utilisant le comparateur par défaut:
import { Component } from '@angular/core';
@Component({
selector: 'cat',
template: `
{{numbers | sort}}
{{strings | sort}}
`
})
export class CatComponent
numbers:Array<number> = [1,7,5,6]
stringsArray<string> = ['cats', 'hats', 'caveats']
}
Trier un tableau d'objets
Si nous voulons trier un tableau d'objets, nous pouvons lui donner une fonction de comparaison.
import { Component } from '@angular/core';
@Component({
selector: 'cat',
template: `
{{cats | sort:byName}}
`
})
export class CatComponent
cats:Array<Cat> = [
{name: "Missy"},
{name: "Squoodles"},
{name: "Madame Pompadomme"}
]
byName(a,b) {
return a.name > b.name ? 1 : -1
}
}
Mises en garde - tuyaux purs ou impurs
Angular 2 a un concept de tuyaux purs et impurs.
Un canal pur optimise la détection des changements en utilisant l'identité d'objet. Cela signifie que le tube ne fonctionnera que si l'objet d'entrée change d'identité, par exemple si nous ajoutons un nouvel élément au tableau. Il ne descendra pas dans les objets. Cela signifie que si nous modifions un attribut imbriqué: this.cats[2].name = "Fluffy"par exemple, le tube ne sera pas réexécuté. Cela aide Angular à être rapide. Les tuyaux angulaires sont purs par défaut.
Un tuyau impur vérifiera les attributs des objets. Cela le rend potentiellement beaucoup plus lent. Comme il ne peut pas garantir ce que fera la fonction de canal (peut-être est-il trié différemment en fonction de l'heure de la journée, par exemple), un tuyau impur fonctionnera à chaque fois qu'un événement asynchrone se produit. Cela ralentira considérablement votre application si le tableau est volumineux.
Le tuyau ci-dessus est pur. Cela signifie qu'il ne fonctionnera que lorsque les objets du tableau seront immuables. Si vous changez de chat, vous devez remplacer tout l'objet chat par un nouveau.
this.cats[2] = {name:"Tomy"}
Nous pouvons changer ce qui précède en un tuyau impur en définissant l'attribut pur:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'sort',
pure: false
})
export class SortPipe implements PipeTransform {
transform(ary: any, fn: Function = (a,b) => a > b ? 1 : -1): any {
return ary.sort(fn)
}
}
Ce tuyau descendra dans les objets, mais sera plus lent. Utiliser avec précaution.