Angular wird nicht sofort mit einem orderBy-Filter geliefert, aber wenn wir uns für einen entscheiden, können wir problemlos einen erstellen. Es gibt jedoch einige Einschränkungen, die wir beachten müssen, um Geschwindigkeit und Minimierung zu erreichen. Siehe unten.
Eine einfache Pfeife würde ungefähr so aussehen.
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)
}
}
Diese Pipe akzeptiert eine Sortierfunktion ( fn) und gibt ihr einen Standardwert, mit dem ein Array von Grundelementen auf sinnvolle Weise sortiert wird. Wir haben die Möglichkeit, diese Sortierfunktion zu überschreiben, wenn wir dies wünschen.
Ein Attributname wird nicht als Zeichenfolge akzeptiert, da Attributnamen einer Minimierung unterliegen. Sie ändern sich, wenn wir unseren Code minimieren, aber Minifizierer sind nicht intelligent genug, um auch den Wert in der Vorlagenzeichenfolge zu minimieren.
Sortieren von Grundelementen (Zahlen und Zeichenfolgen)
Wir könnten dies verwenden, um ein Array von Zahlen oder Zeichenfolgen mit dem Standardkomparator zu sortieren:
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']
}
Sortieren eines Arrays von Objekten
Wenn wir ein Array von Objekten sortieren möchten, können wir ihm eine Komparatorfunktion geben.
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
}
}
Vorsichtsmaßnahmen - reine oder unreine Rohre
Angular 2 hat ein Konzept von reinen und unreinen Rohren.
Eine reine Pipe optimiert die Änderungserkennung anhand der Objektidentität. Dies bedeutet, dass die Pipe nur ausgeführt wird, wenn das Eingabeobjekt seine Identität ändert, z. B. wenn wir dem Array ein neues Element hinzufügen. Es wird nicht in Objekte absteigen. Dies bedeutet, dass wenn wir ein verschachteltes Attribut ändern: this.cats[2].name = "Fluffy"Beispielsweise wird die Pipe nicht erneut ausgeführt. Dies hilft Angular, schnell zu sein. Winkelrohre sind standardmäßig rein.
Ein unreines Rohr hingegen überprüft Objektattribute. Dies macht es möglicherweise viel langsamer. Da nicht garantiert werden kann, was die Rohrleitungsfunktion tut (z. B. je nach Tageszeit unterschiedlich sortiert), wird jedes Mal, wenn ein asynchrones Ereignis auftritt , eine unreine Rohrleitung ausgeführt. Dies verlangsamt Ihre App erheblich, wenn das Array groß ist.
Das Rohr oben ist rein. Dies bedeutet, dass es nur ausgeführt wird, wenn die Objekte im Array unveränderlich sind. Wenn Sie eine Katze wechseln, müssen Sie das gesamte Katzenobjekt durch ein neues ersetzen.
this.cats[2] = {name:"Tomy"}
Wir können das Obige in ein unreines Rohr ändern, indem wir das reine Attribut festlegen:
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)
}
}
Diese Pipe steigt in Objekte ab, ist jedoch langsamer. Mit Vorsicht verwenden.