How To Upgrade Angular Sorting Filters

Introduction

AngularJS, Eine der nützlichsten Funktionen des ersten AngularJS-Angebots war die Möglichkeit, Daten auf der Seite zu filtern und zu sortieren, indem nur Template-Variablen und Filter verwendet wurden. Die Zwei-Wege-Datenbindung überzeugte viele AngularJS-Umsteiger.

Heute bevorzugen jedoch viele Frontend-Entwickler die Ein-Wege-Datenbindung, und diese orderBy– und filter-Filter sind mit dem Aufkommen von Angular untergegangen. (Hinweis: In diesem Artikel verwende ich „AngularJS“, um mich auf 1.x zu beziehen, und einfach „Angular“, um mich auf 2+ zu beziehen.)

Aber wie sollen wir denselben Effekt erreichen? Die Antwort liegt in unseren Komponenten, also schauen wir uns ein ngUpgrade-Projekt an und lernen, wie das geht!

Schritt 1 – Code aus Git ziehen

Wir werden Schritt für Schritt das Template einer frisch umgeschriebenen Komponente aktualisieren. Dann fügen wir Sortier- und Filterfunktionen hinzu, um die gesamte Funktionalität von AngularJS wiederherzustellen. Dies ist eine wichtige Fähigkeit, die für den ngUpgrade-Prozess entwickelt werden muss.

Um zu beginnen, nehmen Sie sich einen Moment Zeit, um das Beispielprojekt zu klonen, das wir verwenden werden (vergessen Sie nicht, npm install in den beiden Ordnern public und server auszuführen). Sehen Sie sich diesen Commit für unseren Ausgangspunkt an:

git checkout 9daf9ab1e21dc5b20d15330e202f158b4c065bc3

Dieses Beispielprojekt ist ein ngUpgrade-Hybridprojekt, das sowohl AngularJS 1.6 als auch Angular 4 verwendet. Es hat eine funktionierende Express-API und ein Webpack-Builds für Entwicklung und Produktion. Fühlen Sie sich frei, es zu erkunden, zu forken und die Muster in Ihren eigenen Projekten zu verwenden. Wenn Sie sich eine Version dieses Projekts ansehen möchten, die Angular 5 verwendet, sehen Sie sich dieses Repo an. Für die Zwecke dieses Tutorials spielen die Unterschiede zwischen den beiden Versionen keine Rolle (ich weise nur auf Kleinigkeiten hin).

Schritt 2 – Ersetzen der AngularJS-Syntax

In diesem Stadium unserer Anwendung ist unsere Auftragskomponente in Angular umgeschrieben, wobei alle ihre Abhängigkeiten injiziert und aufgelöst sind. Wenn wir jedoch versuchen würden, unsere Anwendung auszuführen, würden wir in der Konsole Fehler sehen, die auf Probleme mit unserem Template hinweisen. Genau das müssen wir zuerst beheben. Wir werden die AngularJS-Syntax in der Vorlage für Bestellungen (orders/orders.html) ersetzen, damit die Route geladen und die Bestellungen auf der Seite angezeigt werden können. Als Nächstes werden wir die Filterung und Sortierung beheben.

Als Erstes müssen wir alle Instanzen von $ctrl in dieser Vorlage loswerden. Sie sind in Angular nicht mehr notwendig. Wir können einfach eine Suche und Ersetzung durchführen, um $ctrl. (beachten Sie den Punkt) zu finden und durch nichts zu ersetzen.

Nun ersetzen wir das data-ng-click in unserer Schaltfläche in Zeile 13. In Angular verwenden wir statt ng-click einfach das Ereignis click, mit Klammern, um anzuzeigen, dass es sich um ein Ereignis handelt. Klammern zeigen eine Eingabe an, und Klammern zeigen eine Ausgabe oder ein Ereignis an.

<button type="button" (click)="goToCreateOrder()" class="btn btn-info">Create Order</button>

Wir sagen hier nur, dass beim Klick-Ereignis die Funktion goToCreateOrder unserer Komponente Bestellungen ausgelöst wird.

Bevor wir weitermachen, nehmen wir uns eine Minute Zeit, um zu beweisen, dass unsere Komponente tatsächlich geladen wird. Kommentieren Sie das gesamte div aus, das unsere Bestellungen lädt (ab Zeile 17). Um die Anwendung zu starten, öffnen Sie ein Terminal und führen Sie die folgenden Befehle aus:

cd servernpm start

Damit wird der Express-Server gestartet. Um den Webpack-Entwicklungsserver zu starten, öffnen Sie ein anderes Terminal und führen Sie aus:

cd publicnpm run dev

(Sie können diese Prozesse für den Rest dieses Tutorials laufen lassen.)

Sie sollten sehen, dass unsere Anwendung wieder geladen wird. Wenn Sie zur Route „Bestellungen“ gehen, sehen Sie, dass die Komponente „Bestellungen“ korrekt angezeigt wird.

Wir können auch auf die Schaltfläche „Bestellung erstellen“ klicken und werden korrekt zur Route „Bestellung erstellen“ und zum Formular weitergeleitet.

Okay, kommen wir zurück zum HTML. Entfernen Sie den div-Kommentar (unsere App wird wieder kaputt sein).

Ersetzen wir alle restlichen Instanzen data-ng-click durch den (click)Eventhandler. Sie können entweder Suchen & Ersetzen verwenden oder einfach die Tastenkombination Ihres Editors zum Auswählen aller Vorkommen verwenden (in VS Code für Windows ist dies Strg+Umschalt+L).

Als nächstes ersetzen Sie alle Vorkommen von data-ng-show durch *ngIf. Es gibt eigentlich keine direkte Entsprechung zu ng-show in Angular, aber das ist in Ordnung. Es ist besser, *ngIf zu verwenden, weil man auf diese Weise tatsächlich Elemente zum DOM hinzufügt und aus ihm entfernt, anstatt sie nur ein- und auszublenden. Wir müssen also nur unsere data-ng-shows finden und durch *ngIf ersetzen.

Schließlich müssen wir zwei Dinge tun, um unseren Tabellenkörper zu reparieren. Erstens, ersetzen Sie data-ng-repeat durch *ngFor="let order of orders". Beachten Sie, dass wir auch die Filter orderBy und filter in dieser Zeile entfernen, so dass die gesamte tr wie folgt aussieht:

<tr *ngFor="let order of orders">

Zweitens können wir das Präfix data-ng vor dem Link href zur Route für die Bestelldetails löschen. AngularJS kümmert sich hier immer noch um das Routing, aber wir brauchen dieses Präfix nicht mehr zu verwenden, da es sich jetzt um ein Angular-Template handelt.

Wenn wir uns die Anwendung noch einmal ansehen, können wir sehen, dass die Bestellungen korrekt auf dem Bildschirm geladen werden:

Es gibt natürlich ein paar Fehler. Die Sortierlinks funktionieren nicht mehr, und jetzt ist unsere Währung irgendwie durcheinander, weil die Währungs-Pipe in Angular etwas anders ist als ihr AngularJS-Gegenstück. Dazu werden wir noch kommen. Für den Moment ist das ein gutes Zeichen, denn es bedeutet, dass unsere Daten in die Komponente gelangen und auf der Seite geladen werden. Wir haben also die Grundlagen dieser Vorlage nach Angular konvertiert. Jetzt sind wir bereit, unsere Sortierung und Filterung in Angriff zu nehmen!

Schritt 3 – Hinzufügen der Sortierung

Wir haben unsere Bestellungen auf dem Bildschirm geladen, aber wir haben noch keine Möglichkeit, sie zu ordnen oder zu sortieren. In AngularJS war es üblich, den eingebauten orderBy-Filter zum Sortieren der Daten auf der Seite zu verwenden. Angular verfügt nicht mehr über einen orderBy-Filter. Das liegt daran, dass es jetzt dringend empfohlen wird, diese Art von Geschäftslogik in die Komponente zu verlagern, anstatt sie in der Vorlage zu haben. Und genau das werden wir hier tun. (Hinweis: Wir werden hier einfache alte Funktionen und Ereignisse verwenden, keinen reaktiven Formularansatz. Das liegt daran, dass wir nur in kleinen Schritten versuchen, diese Dinge zu verstehen. Sobald du die Grundlagen verinnerlicht hast, kannst du mit Observables weitermachen!)

Sortieren in der Komponente

Wir haben bereits den Filter orderBy aus ng-repeat entfernt, als wir ihn in *ngFor geändert haben. Jetzt werden wir eine Sortierfunktion für die Komponente „Bestellungen“ erstellen. Wir können die Klick-Ereignisse auf unseren Tabellenüberschriften verwenden, um diese Funktion aufzurufen und die Eigenschaft zu übergeben, nach der wir sortieren möchten. Außerdem soll die Funktion zwischen aufsteigender und absteigender Sortierung umschalten.

Öffnen wir die Komponente orders (./orders/orders.component.ts) und fügen der Klasse zwei öffentliche Eigenschaften hinzu. Diese werden mit den beiden Eigenschaften übereinstimmen, auf die unsere Vorlage bereits verweist. Die erste wird sortType vom Typ string sein. Die zweite wird sortReverse vom Typ boolean sein und wir setzen den Standardwert auf false. Die Eigenschaft sortReverse gibt nur an, ob die Reihenfolge umgedreht werden soll – betrachten Sie sie nicht als Synonym für aufsteigend oder absteigend.

Nach der Deklaration des Titels in der Klasse sollte nun Folgendes stehen:

sortType: string;sortReverse: boolean = false;

Als Nächstes fügen wir die Funktion hinzu, die wir mit der Prototyp-Funktion Array.sort in JavaScript verwenden werden. Fügen Sie diese nach der Funktion goToCreateOrder (aber immer noch innerhalb der Klasse) hinzu:

dynamicSort(property) { return function (a, b) { let result = (a < b) ? -1 : (a > b) ? 1 : 0; return result; } }

Diese dynamische Sortierfunktion vergleicht die Eigenschaftswerte von Objekten in einem Array. Die verschachtelte ternäre Funktion kann auf den ersten Blick etwas schwierig zu verstehen sein, aber sie besagt im Grunde nur, dass wir -1 zurückgeben, wenn der Wert unserer Eigenschaft von A kleiner als B ist. Andernfalls, wenn er größer ist, wird 1 zurückgegeben. Wenn die beiden gleich sind, wird 0 zurückgegeben.

Nun, das ist kein super ausgeklügelter oder tiefer Vergleich. Es gibt weitaus ausgefeiltere Hilfsfunktionen, die Sie schreiben könnten, um für Sie zu sortieren, und Sie können gerne damit experimentieren, wie Sie diese Funktion aufbrechen können. Für unsere Zwecke reicht das aber aus, und Sie können diese Logik einfach durch eine beliebige benutzerdefinierte Sortierlogik ersetzen.

Das ist also unsere Hilfsfunktion. Der Sortierfunktion des Array-Prototyps kann eine Funktion übergeben werden, die sie dann zum Vergleichen von Elementen in einem Array verwenden kann. Erstellen wir eine Funktion namens sortOrders in unserer Klasse, die sich das mit der neuen Funktion dynamicSort zunutze macht:

sortOrders(property) { }

Zunächst müssen wir die Eigenschaft sortType in unserer Klasse gleich der übergebenen Eigenschaft setzen. Dann wollen wir die Eigenschaft sortReverse umschalten. Wir haben dann Folgendes:

sortOrders(property) { this.sortType = property; this.sortReverse = !this.sortReverse;}

Jetzt können wir die Funktion sort auf this.orders aufrufen, aber unsere dynamische Sortierfunktion mit unserer Eigenschaft übergeben:

sortOrders(property) { this.sortType = property; this.sortReverse = !this.sortReverse; this.orders.sort(this.dynamicSort(property));}

Und es gibt noch eine letzte Sache, die wir tun müssen. Wir müssen unsere Funktion dynamicSort ein wenig ändern, um die Reihenfolge des Arrays in auf- oder absteigender Reihenfolge umkehren zu können. Dazu verknüpfen wir das Ergebnis von dynamicSort mit der Eigenschaft sortReverse der Klasse.

Als erstes deklarieren wir eine Variable:

let sortOrder = -1;

Dann können wir prüfen, ob unsere sortReverse-Eigenschaft auf unserer Klasse wahr oder falsch ist. Wenn sie wahr ist, setzen wir unsere Variable für die Sortierreihenfolge auf 1:

if (this.sortReverse) { sortOrder = 1; }

Wir binden unsere Funktionen auf diese Weise zusammen, weil wir in unserer Sortierfunktion zur Veranschaulichung eine Umschaltung vornehmen. Ein anderer Ansatz wäre es, eine Variable mit dem Namen sortDescending anstelle von sortReverse zu haben, die durch eine separate Funktion gesteuert wird. Wenn Sie diesen Weg gehen, machen Sie das Gegenteil – sortOrder wäre 1, wenn sortDescending nicht wahr ist.

Wir könnten diese letzten beiden Dinge auch zu einem ternären Ausdruck kombinieren, aber um der Klarheit willen werde ich es etwas ausführlicher lassen. Und um das Ergebnis in das Gegenteil zu verwandeln, multipliziere ich einfach result mit sortOrder. Unsere dynamicSort-Funktion sieht jetzt so aus:

 dynamicSort(property) { let sortOrder = -1; if (this.sortReverse) { sortOrder = 1; } return function(a, b) { let result = a < b ? -1 : a > b ? 1 : 0; return result * sortOrder; }; }

Dies ist eine Demonstrationsimplementierung der Sortierung, damit Sie die Schlüsselkonzepte der Verwendung einer benutzerdefinierten Sortierfunktion in Ihrer Komponente verstehen.

Wir wollen sehen, ob die Sortierung funktioniert

Bis jetzt haben wir eine dynamicSort-Hilfsfunktion und eine sortOrders-Funktion zu unserer Klasse hinzugefügt, so dass wir in unserer Komponente und nicht in unserer Vorlage sortieren können.

Um zu sehen, ob diese Funktionen funktionieren, fügen wir eine Standardsortierung zu unserer ngOnInit-Funktion hinzu.

Innerhalb unseres forkJoin-Abonnements, nach der forEach, wo wir die Kundennameneigenschaft hinzufügen, rufen wir this.sortOrders auf und geben die Eigenschaft „Total Items“ ein:

this.sortOrders('totalItems');

Wenn der Bildschirm aktualisiert wird, sollten Sie sehen, dass die Bestellungen nach der Gesamtzahl der Artikel sortiert werden.

Jetzt müssen wir diese Sortierung nur noch in unserer Vorlage implementieren, indem wir die Funktion sortOrders in den Links der Tabellenüberschrift aufrufen.

Sortierung zur Vorlage hinzufügen

Wir haben unsere sortOrders-Funktion in unserer Bestellungskomponente korrekt implementiert, was bedeutet, dass wir sie nun zu unserer Vorlage hinzufügen können, damit die Tabellenköpfe wieder klickbar sind.

Bevor wir das tun, lassen Sie uns die Standardsortierung in unserer ngOnInit Funktion so ändern, dass sie nur die ID ist:

this.sortOrders('id');

Das ist ein bisschen normaler als die Verwendung der Gesamtzahl der Artikel.

Nun können wir an unserer Vorlage arbeiten. Das erste, was wir tun wollen, ist die sortOrders-Funktion in allen unseren Klick-Ereignissen aufzurufen. Sie können die Instanzen von sortType = auswählen und sie durch sortOrders( ersetzen. Dann können Sie die Instanzen von ; sortReverse = !sortReverse durch ) ersetzen.

Wir müssen auch zwei der Eigenschaftsnamen korrigieren, die wir hier sowie in den *ngIf-Instanzen übergeben. Ersetzen Sie die 3 Instanzen von orderId durch id und die 3 Instanzen von customername durch customerName.

Das letzte, was ich tun muss, ist, jedes der href-Tags in den Kopfzeilen in Klammern einzuschließen, damit Angular übernimmt und diese Links nirgendwo hinführen. Das Klick-Ereignis wird das sein, was abgefeuert wird. Die Kopfzeilen sollten also diesem Muster folgen:

<th> <a ="" (click)="sortOrders('id')"> Order Id <span *ngIf="sortType == 'id' && !sortReverse" class="fa fa-caret-down"></span> <span *ngIf="sortType == 'id' && sortReverse" class="fa fa-caret-up"></span> </a></th>

Gehen Sie in den Browser und testen Sie alle Ihre Tabellenkopf-Links. Sie sollten sehen, dass jede unserer Eigenschaften jetzt sowohl in aufsteigender als auch in absteigender Reihenfolge sortiert wird. Großartig!

Das ist großartig, aber wir haben eine Sache verloren – unser Cursor ist ein Selektor, kein Zeiger. Lassen Sie uns das mit etwas CSS beheben.

Fix the Cursor

Wir haben unsere Sortierung auf unserer Bestellungsseite richtig hinbekommen, aber unser Cursor ist jetzt ein Selektor statt eines Zeigers, und das ist ärgerlich.

Es gibt verschiedene Möglichkeiten, wie wir das mit CSS beheben können:

• Wir könnten eine Klasse in der SCSS-Datei unserer Hauptanwendung erstellen.
• Wir könnten Inline-CSS schreiben, obwohl das fast nie vorzuziehen ist.
• Wir könnten die Vorteile von Angulars scoped CSS nutzen, indem wir die Option styles im Komponentendekorator verwenden

Wir entscheiden uns für die letzte Option, weil wir nur eine Regel zu unseren Styles für diese spezielle Komponente hinzufügen müssen.

Öffnen Sie erneut die Klasse der Auftragskomponente. Im Komponentendekorator können wir eine neue Eigenschaft namens styles hinzufügen. Styles ist ein Array von Strings, aber die Strings sind CSS-Regeln. Um unseren Cursor zu fixieren, müssen wir nur eine Regel schreiben, die besagt, dass in einer Tabellenzeile, wenn wir einen Link haben, die Eigenschaft cursor in pointer geändert werden muss. Unser Dekorator sieht nun wie folgt aus:

@Component({ selector: 'orders', template: template, styles: })

Wenn wir nun den Mauszeiger über unsere Zeilenköpfe bewegen, sehen Sie, dass wir den Zeiger-Cursor haben. Das Tolle an diesem Ansatz ist, dass sich diese CSS-Regel nicht auf andere Komponenten auswirkt. Sie gilt nur für unsere Auftragskomponente!

Nun wollen wir mal sehen, ob wir etwas mit unserer Filterung anfangen können. Dieser „Filter“ wurde aus Angular entfernt, also müssen wir kreativ sein und uns etwas einfallen lassen, um ihn in unserer Komponente zu implementieren.

Schritt 4 – Filterung hinzufügen

Wir sind bereit, unsere Filterbox zu ersetzen, die den AngularJS-Filter verwendet hat, um die Auftragssammlung auf der Grundlage eines gesuchten Strings zu durchsuchen. Der AngularJS-Filter befand sich in unserem Template und erforderte keinen Code in unserem Controller oder unserer Komponente. Heutzutage wird von dieser Art von Logik in der Vorlage abgeraten. Es ist besser, diese Art von Sortierung und Filterung in unserer Komponentenklasse vorzunehmen.

Hinzufügen einer Filterfunktion

Zurück in unserer Komponente werden wir ein neues Array von Bestellungen mit dem Namen filteredOrders erstellen. Dann übergeben wir unser orders-Array an eine Filterfunktion, die das filteredOrders-Array setzt. Schließlich verwenden wir das filteredOrders auf unserer Vorlage in unserem *ngFor anstelle unseres ursprünglichen Arrays. Auf diese Weise ändern wir nicht die Daten, die vom Server zurückkommen, sondern verwenden nur eine Teilmenge davon.

Zunächst deklarieren wir die neue Eigenschaft unserer Klasse:

filteredOrders: Order;

Dann können wir in unserem forkJoin, das unser ursprüngliches Array von Bestellungen festlegt, den Anfangszustand von filteredOrders auf unser Array Bestellungen setzen:

this.filteredOrders = this.orders;

Nun sind wir bereit, unsere Funktion hinzuzufügen, die tatsächlich die Filterung für uns übernimmt. Fügen Sie diese Funktion direkt nach unseren Sortierfunktionen am unteren Ende unserer Komponente ein:

filterOrders(search: string) { this.filteredOrders = this.orders.filter(o => Object.keys(o).some(k => { if (typeof o === 'string') return o.toLowerCase().includes(search.toLowerCase()); }) ); }

Lassen Sie uns darüber sprechen, was in dieser Funktion vor sich geht. Zuerst geben wir der Funktion eine String-Eigenschaft von search. Dann durchlaufen wir unsere Aufträge in einer Schleife und suchen alle Schlüssel der Objekte. Bei allen Schlüsseln prüfen wir, ob es some-Werte für diese Eigenschaften gibt, die unserem Suchbegriff entsprechen. Dieser Teil von JavaScript kann auf den ersten Blick etwas verwirrend aussehen, aber das ist es, was hier passiert.

Beachten Sie, dass wir in unserer if-Anweisung explizit nach Zeichenketten suchen. In unserem Beispiel beschränken wir unsere Abfrage nur auf Zeichenketten. Wir werden nicht versuchen, verschachtelte Eigenschaften, Zahleneigenschaften oder Ähnliches zu berücksichtigen. Unser Suchbegriff wird mit der Eigenschaft „Kundenname“ übereinstimmen, und wenn wir unsere Adresse oder eine andere Zeichenketteneigenschaft anzeigen möchten, werden auch diese durchsucht.

Natürlich können wir diese Funktion auch so ändern, dass sie nach Zahlen sucht oder eine weitere Ebene verschachtelter Objekte durchsucht, und das ist ganz Ihnen überlassen. Genau wie bei der Sortierung beginnen wir mit einer Demonstrationsimplementierung und überlassen es Ihrer Fantasie, sie komplexer zu gestalten.

Apropos sortOrdersFunktion: Bevor wir weitermachen, müssen wir noch eine letzte Sache an der Komponente tun. Wir müssen nur noch sortOrders so ändern, dass es jetzt filteredOrders verwendet und nicht unser ursprüngliches orders, weil wir wollen, dass der Filter Vorrang vor der Sortierung hat. Ändern Sie es einfach wie folgt:

sortOrders(property) { this.sortType = property; this.sortReverse = !this.sortReverse; this.filteredOrders.sort(this.dynamicSort(property));}

Jetzt können wir diese Filterung in der Vorlage implementieren.

Filterung zur Vorlage hinzufügen

Lassen Sie uns zu unserer Vorlage zurückkehren und sie für die Verwendung unserer Filterung einrichten.

Das erste, was wir tun müssen, ist data-ng-model zu ersetzen. Stattdessen werden wir das Ereignis keyup verwenden, also schreiben wir „keyup“ und setzen es in Klammern ((keyup)). Dies ist ein eingebautes Ereignis in Angular, mit dem wir eine Funktion ausführen können, wenn die Taste einer Eingabe gedrückt wird. Da wir unsere Funktion filterOrders genannt haben, was früher der Name der Eigenschaft war, die wir an den AngularJS-Filter übergeben haben, müssen wir nur noch Klammern daneben setzen. Unsere Eingabe sieht bisher so aus:

<input type="text" class="form-control" placeholder="Filter Orders (keyup)="filterOrders()">

Aber was übergeben wir an die Funktion filter orders? Nun, standardmäßig übergeben die Ereignisse etwas namens $event. Dieses enthält etwas namens target, das den Wert der Eingabe enthält. Es gibt ein Problem bei der Verwendung von $event. Es ist sehr schwierig, den Überblick über diese nebulösen Typen zu behalten, da target.value wirklich alles sein kann. Das macht es schwierig, Fehler zu beheben oder zu wissen, welcher Typ von Wert erwartet wird. Stattdessen hat Angular eine wirklich raffinierte Sache, die wir tun können, nämlich eine Template-Variable zu dieser Eingabe zuweisen.

Glücklicherweise stellt Angular eine Methode zur Verfügung, mit der wir dies tun können. Nach unserem Input-Tag können wir das Rautenzeichen (#) und dann den Namen des gewünschten Modells hinzufügen. Nennen wir es #ordersFilter. Es ist eigentlich egal, wo im Tag Sie dies einfügen oder wie Sie es nennen, aber ich füge es gerne nach der Eingabe ein, damit Sie sehen, welches Modell mit welcher Eingabe verbunden ist, wenn ich nur einen Blick auf die Seite werfe.

Nun kann ich diese Variable in unsere filterOrders Funktion auf dem keyup Ereignis übergeben. Wir brauchen das Rautensymbol davor nicht, aber wir müssen .value hinzufügen. Damit wird der tatsächliche Wert des Modells übergeben und nicht das gesamte Modell selbst. Unsere fertige Eingabe sieht wie folgt aus:

<input #ordersFilter type="text" class="form-control" placeholder="Filter Orders" (keyup)="filterOrders(ordersFilter.value)">

Zuletzt müssen wir unsere *ngFor ändern, um das filteredOrders-Array anstelle des regulären orders-Arrays zu verwenden:

<tr *ngFor="let order of filteredOrders">

Inspect the Product

Sie können sehen, wie viel sauberer unsere Vorlage jetzt ist, da unsere Filterung und Sortierung in der Komponente ist.

Nun lassen Sie uns dies im Browser überprüfen. Wenn Sie einen Text in das Feld eingeben, z. B. „sally“, sollten Sie sehen, dass sich die Reihenfolge ändert und dass die Sortierung darüber hinaus funktioniert:

Gut, wir haben ein weiteres AngularJS-Feature ersetzt!

Jetzt müssen wir nur noch eine letzte Sache an dieser Komponente tun – die Currency Pipe reparieren.

Schritt 5 – die Currency Pipe reparieren

Unser letzter Schliff besteht darin, den ehemaligen Währungsfilter zu aktualisieren, der jetzt in Angular Currency Pipe genannt wird. Wir müssen nur ein paar Parameter zur Pipe im Template hinzufügen, die wir in AngularJS nicht angeben mussten. Dieser Teil unterscheidet sich, wenn Sie Angular 4 oder Angular 5 verwenden:.

In Angular 4, tun Sie dies:
<td>{{order.totalSale | currency:'USD':true}}</td>

In Angular 5+, tun Sie dies:
<td>{{order.totalSale | currency:'USD':'symbol'}}</td>

Die erste Option ist der Währungscode (es gibt viele, Sie sind nicht auf US Dollar beschränkt!). Die zweite Option ist die Anzeige des Symbols. In Angular 4 ist dies ein Boolescher Wert, der angibt, ob das Währungssymbol oder der Code verwendet werden soll. In Angular 5+ sind die Optionen symbol, code oder symbol-narrow als Strings.

Sie sollten jetzt das erwartete Symbol sehen:

Und wir sind fertig! Um den fertigen Code zu sehen, sehen Sie sich diesen Commit an.

Abschluss

Sie haben gute Arbeit geleistet und bis zum Ende durchgehalten! Hier ist, was wir mit diesem Leitfaden erreicht haben:

1. Ersetzen der AngularJS-Template-Syntax durch Angular-Syntax
2. Verlegen der Sortierung in die Komponente
3. Verwenden von skalierten CSS-Styles
4. Verlegen der Filterung in die Komponente
5. Ersetzen des AngularJS-Währungsfilters durch die Angular-Währungs-Pipe

Wie geht es jetzt weiter? Es gibt viele Dinge, die man tun könnte:

• Die Sortierung anspruchsvoller gestalten (zum Beispiel: Soll die Reihenfolge zurückgesetzt werden oder gleich bleiben, wenn der Benutzer auf eine neue Überschrift klickt?)
• Die Filterung anspruchsvoller gestalten (Suche nach Zahlen oder verschachtelten Eigenschaften)
• Zu einem reaktiven Ansatz wechseln. Sie könnten auf eine Observable von Wertänderungen anstelle der keyup-Funktion hören und dort Sortierung und Filterung vornehmen. Die Verwendung von Observablen würde auch wirklich coole Dinge wie das Entprellen der Eingabe ermöglichen!