Winkel 2 sortieren und filtern
In Angularjs 1 ist es möglich, zu Sortieren und filter auf die folgende Weise:
<ul ng-repeat="friend in friends | filter:query | orderBy: 'name' ">
<li>{{friend.name}}</li>
</ul>
Aber ich konnte keine Beispiele wie man dies in Angularjs 2.0. Meine Frage ist, wie das Sortieren und filtern in Angularjs 2.0? Wenn es immer noch nicht unterstützt, weiß jemand Wann oder ob es in Angularjs 2.0?
InformationsquelleAutor der Frage alexsoftware | 2015-10-01
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dieser nicht Hinzugefügt, out of the box, weil die Winkel-team wünscht Winkel 2 zu laufen minified. OrderBy läuft der Reflexion, die Pausen mit Verkleinerung. Check-out Miško Heverey Antwort auf die Sache.
Ich habe mir die Zeit genommen, um erstellen Sie eine OrderBy-Rohr unterstützt sowohl single-und multi-dimensionale arrays. Es unterstützt auch die können über mehrere Spalten Sortieren von mehrdimensionalen Arrays.
Dieser Leitung ermöglicht das hinzufügen weitere Elemente, um das array nach dem Rendern der Seite, und immer noch Sortieren der arrays mit den neuen Sachen richtig.
Ich habe eine schreiben auf den Prozess hier.
Und hier ist eine funktionierende demo: http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby und https://plnkr.co/edit/DHLVc0?p=info
EDIT: neue demo zu http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby
EDIT 2: Aktualisiert ngFor neue syntax
InformationsquelleAutor der Antwort Cory Shaw
Hier ist ein einfacher filter Rohr für ein array von Objekten, die Attribute enthalten, mit string-Werte (ES6)
filter-array-pipe.js
Ihre Komponente
myobjComponent.js
In Ihrer Vorlage
myobj.list.html
InformationsquelleAutor der Antwort select
Es ist nicht unterstützt von design. Die sortBy-Rohr-können, führen echte performance-Probleme für eine Produktion Skala app. Dies war ein Problem mit den eckigen version 1.
Sollten Sie nicht erstellen Sie eine benutzerdefinierte Sortierfunktion. Stattdessen sollten Sie Sortieren das array zunächst in der typescript-Datei und zeigen es. Wenn die Bestellung aktualisiert werden muss, wenn beispielsweise ein dropdown ausgewählt ist, dann haben Sie diese dropdown-Auswahl trigger-Funktion und rufen Sie Ihr sort-Funktion aufgerufen. Diese Art der Funktion extrahiert werden können, um einen Dienst, so dass es wieder verwendet werden kann. Diese Art der Sortierung wird nur angewendet, wenn es erforderlich ist und Ihre app-performance viel besser sein wird.
InformationsquelleAutor der Antwort Sam
Rohr nimmt Daten als input und transformiert diese zu einer gewünschten Ausgabe.
Fügen Sie diese pipe-Datei:
orderby.ts
in Ihrem/app
Ordner .In Ihrer Komponente-Datei (app.Komponente.ts) importieren Sie das Rohr, die Sie gerade Hinzugefügt:
import {OrderByPipe} from './orderby';
Fügen Sie dann
*ngFor="#article of articles | orderby:'id'"
im inneren Ihrer Vorlage, wenn Sie wollen, Sortieren Sie Ihre Artikel nach id aufsteigend oderorderby:'!id'"
in absteigender Reihenfolge.Wir hinzufügen von Parametern zu einem Rohr, indem Sie nach der pipe-name mit einem Doppelpunkt ( : ) und dann der Wert des Parameters
Müssen wir die Liste unserer Pfeife in der Pfeifen-array der @Component decorator.
pipes: [ OrderByPipe ]
.Mehr info hier auf meinem github und diesen Beitrag auf meiner website
InformationsquelleAutor der Antwort Nicolas2bert
Müssen Sie erstellen Sie Ihre eigenen Rohr für die array-Sortierung, hier ist ein Beispiel wie Sie das tun können.
https://plnkr.co/edit/DU6pxr?p=preview
InformationsquelleAutor der Antwort Vlado Tesanovic
Dies ist meine Art. Es wird die Nummer Sortieren , string sort und Datum Sortieren .
InformationsquelleAutor der Antwort Human Being