Angular non viene fornito con un orderBy filter out of the box, ma se decidiamo di averne bisogno possiamo facilmente crearne uno. Ci sono tuttavia alcuni avvertimenti di cui dobbiamo essere consapevoli riguardo alla velocità e alla minimizzazione. Vedi sotto.
Un semplice tubo sarebbe simile a questo.
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)
}
}
Questa pipe accetta una funzione di ordinamento (fn ) e le fornisce un valore predefinito che ordinerà un array di primitive in modo sensato. Abbiamo la possibilità di sovrascrivere questa funzione di ordinamento, se lo desideriamo.
Non accetta il nome di un attributo come stringa, perché i nomi degli attributi sono soggetti a minimizzazione. Cambieranno quando minimizziamo il nostro codice, ma i minificatori non sono abbastanza intelligenti da minimizzare anche il valore nella stringa del modello.
Ordinamento delle primitive (numeri e stringhe)
Potremmo usarlo per ordinare un array di numeri o stringhe usando il comparatore predefinito:
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']
}
Ordinamento di un array di oggetti
Se vogliamo ordinare un array di oggetti, possiamo assegnargli una funzione di confronto.
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
}
}
Avvertenze: tubi puri e impuri
Angular 2 ha un concetto di tubi puri e impuri.
Un pipe puro ottimizza il rilevamento delle modifiche utilizzando l'identità dell'oggetto. Ciò significa che la pipe verrà eseguita solo se l'oggetto di input cambia identità, ad esempio se aggiungiamo un nuovo elemento all'array. Non scenderà negli oggetti. Ciò significa che se cambiamo un attributo annidato:this.cats[2].name = "Fluffy" ad esempio, la pipe non verrà rieseguita. Questo aiuta Angular ad essere veloce. I tubi angolari sono puri per impostazione predefinita.
Un tubo impuro, d'altra parte, controllerà gli attributi dell'oggetto. Questo potenzialmente lo rende molto più lento. Poiché non può garantire ciò che farà la funzione pipe (forse è stata ordinata in modo diverso in base all'ora del giorno, ad esempio), una pipe impura verrà eseguita ogni volta che si verifica un evento asincrono.Questo rallenterà notevolmente la tua app se l'array è grande.
Il tubo sopra è puro. Ciò significa che verrà eseguito solo quando gli oggetti nell'array non sono modificabili. Se cambi un gatto, devi sostituire l'intero oggetto gatto con uno nuovo.
this.cats[2] = {name:"Tomy"}
Possiamo cambiare quanto sopra in un tubo impuro impostando l'attributo puro:
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)
}
}
Questo tubo scenderà negli oggetti, ma sarà più lento. Usare con cautela.