Jak zaktualizować filtry sortujące Angulara

Wprowadzenie

AngularJS, Jedną z najbardziej użytecznych cech początkowej oferty AngularJS była możliwość filtrowania i sortowania danych na stronie przy użyciu tylko zmiennych szablonowych i filtrów. Dwukierunkowe wiązanie danych zdobyło wielu konwertytów na AngularJS.

Dzisiaj jednak wielu programistów front-end preferuje jednokierunkowe wiązanie danych, a te orderBy i filter filtry zostały zachwiane wraz z pojawieniem się Angulara. (Uwaga: w tym artykule będę używał „AngularJS” w odniesieniu do 1.x i po prostu „Angular” w odniesieniu do 2+.)

Ale jak mamy osiągnąć ten sam efekt? Odpowiedź leży w naszych komponentach, więc spójrzmy na projekt ngUpgrade i dowiedzmy się jak to zrobić!

Krok 1 – Pull Code from Git

Przejdziemy przez aktualizację szablonu świeżo napisanego komponentu. Następnie dodamy sortowanie i filtrowanie, aby przywrócić całą funkcjonalność, jaką miał w AngularJS. Jest to kluczowa umiejętność, którą należy rozwinąć w procesie ngUpgrade.

Aby zacząć, poświęć chwilę na sklonowanie przykładowego projektu, którego będziemy używać (nie zapomnij uruchomić npm install w obu folderach public i server). Sprawdź ten commit dla naszego punktu wyjścia:

git checkout 9daf9ab1e21dc5b20d15330e202f158b4c065bc3

Ten przykładowy projekt jest hybrydowym projektem ngUpgrade, który używa zarówno AngularJS 1.6 jak i Angular 4. Posiada działający Express API i Webpack do budowy zarówno dla rozwoju jak i produkcji. Zapraszamy do eksploracji, rozwidlenia go i wykorzystania wzorców w swoich własnych projektach. Jeśli chcesz zobaczyć wersję tego projektu, która używa Angulara 5, sprawdź to repo. Dla celów tego tutorialu, różnice między tymi dwiema wersjami nie będą miały znaczenia (wskażę wszystko, co drobne).

Krok 2 – Zamień składnię AngularJS

Na tym etapie naszej aplikacji, nasz komponent zamówień jest przepisany w Angularze, z wszystkimi jego zależnościami wstrzykniętymi i rozwiązanymi. Gdybyśmy jednak spróbowali uruchomić naszą aplikację, zobaczylibyśmy w konsoli błędy wskazujące na problemy z naszym szablonem. To właśnie to musimy naprawić w pierwszej kolejności. Zamienimy składnię AngularJS w szablonie zamówień (orders/orders.html), tak aby trasa mogła się załadować, a zamówienia wyświetlić na stronie. Następnie naprawimy filtrowanie i sortowanie.

Pierwszą rzeczą, którą musimy zrobić, jest pozbycie się wszystkich instancji $ctrl w tym szablonie. Nie są one już potrzebne w Angular. Możemy po prostu zrobić find and replace, aby znaleźć $ctrl. (zwróć uwagę na kropkę) i zastąpić go niczym.

Zastąpmy teraz data-ng-click w naszym przycisku w linii 13. W Angular, zamiast ng-click, po prostu używamy zdarzenia click, z nawiasami, aby wskazać, że jest to zdarzenie. Nawiasy wskazują na wejście, a nawiasy wskazują na wyjście lub zdarzenie.

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

Po prostu mówimy tutaj, że na zdarzenie kliknięcia, odpalamy funkcję goToCreateOrder na naszym komponencie zamówień.

Zanim przejdziemy dalej, poświęćmy chwilę na udowodnienie, że nasz komponent rzeczywiście się ładuje. Wykreśl całą div, która ładuje nasze zlecenia (od linii 17). Aby uruchomić aplikację, otwórz terminal i wykonaj następujące polecenia:

cd servernpm start

To uruchomi serwer Express. Aby uruchomić serwer Webpack dev, otwórz inny terminal i uruchom:

cd publicnpm run dev

(Możesz zachować te procesy uruchomione do końca tego poradnika.)

Powinieneś zobaczyć, że nasza aplikacja ładuje się ponownie. Jeśli przejdziesz do trasy zamówień, zobaczysz, że komponent zamówień jest wyświetlany poprawnie.

Możemy również kliknąć przycisk Utwórz zamówienie i zostaniemy prawidłowo odesłani do naszej trasy i formularza Utwórz zamówienie.

Dobrze, wróćmy do HTML. Odkomentuj ten div (nasza aplikacja znowu będzie zepsuta).

Zastąpmy wszystkie pozostałe instancje data-ng-click obsługą zdarzenia (click). Możesz użyć funkcji Find & Replace lub po prostu użyć skrótu do zaznaczania wszystkich wystąpień w edytorze (w VS Code for Windows jest to Ctrl+Shift+L).

Następnie zastąp wszystkie wystąpienia data-ng-show przez *ngIf. W rzeczywistości nie ma bezpośredniego odpowiednika ng-show w Angular, ale to jest w porządku. Lepiej jest użyć *ngIf, ponieważ w ten sposób faktycznie dodajesz i usuwasz elementy z DOM, zamiast tylko je ukrywać i pokazywać. Tak więc, wszystko co musimy zrobić to znaleźć nasze data-ng-shows i zastąpić je *ngIf.

Na koniec, musimy zrobić dwie rzeczy, aby naprawić ciało naszej tabeli. Po pierwsze, zamień data-ng-repeat na *ngFor="let order of orders". Zauważ, że usuwamy również filtry orderBy i filter w tej linii, tak aby cały tr wyglądał tak:

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

Po drugie, możemy usunąć prefiks data-ng przed linkiem href do trasy szczegółów zamówienia. AngularJS nadal obsługuje routing w tym miejscu, ale nie musimy już używać tego przedrostka, ponieważ jest to teraz szablon Angulara.

Jeśli ponownie spojrzymy na aplikację, zobaczymy, że zamówienia ładują się poprawnie na ekranie:

Jest z tym oczywiście kilka rzeczy nie tak. Linki sortujące już nie działają, a teraz nasza waluta jest trochę pomieszana, ponieważ rura walutowa w Angular jest nieco inna niż jej odpowiednik w AngularJS. Dojdziemy do tego. Na razie jest to świetny znak, ponieważ oznacza to, że nasze dane docierają do komponentu i ładują się na stronie. Tak więc, mamy już podstawy tego szablonu przekonwertowane do Angulara. Teraz jesteśmy gotowi, aby zająć się sortowaniem i filtrowaniem!

Krok 3 – Dodawanie sortowania

Mamy nasze zamówienia ładujące się na ekranie, ale nie mamy jeszcze sposobu na ich uporządkowanie lub posortowanie. W AngularJS, naprawdę powszechne było używanie wbudowanego filtra orderBy do sortowania danych na stronie. Angular nie posiada już filtru orderBy. Dzieje się tak dlatego, że obecnie zachęca się do przenoszenia tego rodzaju logiki biznesowej do komponentu, zamiast umieszczania jej w szablonie. Tak więc, to jest to, co zamierzamy tutaj zrobić. (Uwaga: będziemy tutaj używać zwykłych, starych funkcji i zdarzeń, a nie reaktywnego podejścia do formularzy. Jest to spowodowane tym, że próbujemy dopiero zrobić małe kroczki do zrozumienia tych rzeczy. Gdy już opanujesz podstawy, nie krępuj się posunąć dalej z obserwowalnymi!)

Sortowanie w komponencie

Usunęliśmy już filtr orderBy z ng-repeat, gdy zmieniliśmy go na *ngFor. Teraz zajmiemy się funkcją sortowania w komponencie orders. Możemy użyć zdarzeń kliknięcia na nagłówkach naszych tabel, aby wywołać tę funkcję i przekazać właściwość, według której chcemy sortować. Chcemy również, aby ta funkcja przełączała się pomiędzy sortowaniem rosnącym i malejącym.

Otwórzmy komponent orders (./orders/orders.component.ts) i dodajmy dwie publiczne właściwości do klasy. Będą one odpowiadały dwóm właściwościom, do których nasz szablon już się odwołuje. Pierwszą z nich będzie sortType typu string. Drugą będzie sortReverse typu boolean i ustawimy jej domyślną wartość na false. Właściwość sortReverse tylko śledzi, czy odwrócić kolejność – nie myśl o niej jako o synonimie rosnącej lub malejącej.

Więc teraz powinieneś mieć to po deklaracji tytułu w klasie:

sortType: string;sortReverse: boolean = false;

Następnie dodamy funkcję, której będziemy używać z prototypem funkcji Array.sort w JavaScript. Dodajemy ją po funkcji goToCreateOrder (ale wciąż wewnątrz klasy):

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

Ta dynamiczna funkcja sortowania będzie porównywać wartości właściwości obiektów w tablicy. Zagnieżdżona funkcja trójskładnikowa może być trochę trudna do zrozumienia na pierwszy rzut oka, ale w zasadzie jest to po prostu powiedzenie, że jeśli wartość naszej właściwości A jest mniejsza niż B, zwróć -1. W przeciwnym razie, jeśli jest większa, zwróć 1. Jeśli te dwie wartości są równe, zwróć 0.

Teraz, to nie jest super wyrafinowane lub głębokie porównanie. Istnieją o wiele bardziej wyrafinowane funkcje pomocnicze, które mógłbyś napisać, aby sortować dla ciebie, i nie krępuj się eksperymentować z tym, jak możesz złamać ten jeden. To wystarczy do naszych celów, chociaż, i możesz po prostu zamienić tę logikę z jakąkolwiek logiką sortowania, którą lubisz.

Więc to jest nasza funkcja pomocnicza. Funkcji sortującej prototypu Array można przekazać funkcję, której może ona użyć do porównania elementów w tablicy. Zróbmy funkcję o nazwie sortOrders w naszej klasie, która korzysta z tego dzięki nowej funkcji dynamicSort:

sortOrders(property) { }

Pierwszą rzeczą, jaką musimy zrobić, jest ustawienie właściwości sortType w naszej klasie równej właściwości, która jest przekazywana. Następnie chcemy przełączyć właściwość sortReverse. Będziemy mieli tak:

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

Teraz możemy wywołać funkcję sort na this.orders, ale przekazać naszą dynamiczną funkcję sortowania z naszą właściwością:

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

I jest jeszcze jedna ostatnia rzecz, którą musimy zrobić. Musimy zmodyfikować naszą funkcję dynamicSort tylko trochę, aby móc odwrócić kolejność tablicy na rosnącą lub malejącą. Aby to zrobić, powiążemy wynik funkcji dynamicSort z właściwością sortReverse w klasie.

Pierwszą rzeczą, którą zrobimy, będzie zadeklarowanie zmiennej:

let sortOrder = -1;

Potem możemy sprawdzić, czy nasza właściwość sortReverse na naszej klasie jest true czy false. Jeśli jest to prawda, ustawimy naszą zmienną sort order równą 1:

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

Wiążemy nasze funkcje razem w ten sposób, ponieważ robimy toggle w naszej funkcji sortowania dla celów demonstracyjnych. Aby być bardziej dokładnym, innym podejściem byłoby posiadanie zmiennej o nazwie sortDescending zamiast sortReverse, która jest kontrolowana przez oddzielną funkcję. Jeśli pójdziesz tą drogą, zrobisz coś odwrotnego – sortOrder będzie równe 1, chyba że sortDescending będzie prawdziwe.

Moglibyśmy również połączyć te dwie ostatnie rzeczy w wyrażenie trójskładnikowe, ale dla jasności, zostawię to trochę bardziej dosłowne. A następnie, aby uczynić nasz wynik przeciwieństwem tego, co normalnie by było, mogę po prostu pomnożyć result przez nasz sortOrder. Więc nasza funkcja dynamicSort wygląda teraz tak:

 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; }; }

Ponownie, jest to demonstracyjna implementacja sortowania, abyś zrozumiał kluczowe koncepcje używania niestandardowych funkcji sortowania w twoim komponencie.

Zobaczmy, czy sortowanie działa

Do tej pory dodaliśmy funkcję pomocniczą dynamicSort i funkcję sortOrders do naszej klasy, abyśmy mogli sortować w naszym komponencie zamiast w naszym szablonie.

Aby sprawdzić, czy te funkcje działają, dodajmy domyślne sortowanie do naszej funkcji ngOnInit.

Wewnątrz naszej subskrypcji forkJoin, po forEach, w której dodajemy właściwość customer name, wywołajmy this.sortOrders i przekażmy właściwość total items:

this.sortOrders('totalItems');

Gdy ekran się odświeży, powinieneś zobaczyć, że zamówienia są sortowane według sumy pozycji.

Teraz musimy tylko zaimplementować to sortowanie w naszym szablonie, wywołując funkcję sortOrders w odnośnikach nagłówka tabeli.

Dodaj sortowanie do szablonu

Mamy naszą funkcję sortOrders działającą poprawnie w naszym komponencie zamówień, co oznacza, że jesteśmy teraz gotowi dodać ją do naszego szablonu, aby nagłówki tabel były znowu klikalne.

Zanim to zrobimy, zmieńmy domyślne sortowanie w naszej funkcji ngOnInit, aby było to po prostu ID:

this.sortOrders('id');

To trochę bardziej normalne niż używanie sumy pozycji.

Teraz możemy popracować nad naszym szablonem. Pierwszą rzeczą, którą chcemy zrobić, jest wywołanie funkcji sortOrders we wszystkich naszych zdarzeniach kliknięcia. Możesz wybrać instancje sortType = i zamienić je na sortOrders(. Następnie, możesz zastąpić instancje ; sortReverse = !sortReverse przez ).

Musimy również poprawić dwie z nazw właściwości, które przekazujemy tutaj, jak również w instancjach *ngIf. Zamień 3 instancje orderId na id oraz 3 instancje customername na customerName.

Ostatnią rzeczą, którą muszę zrobić, jest zawinięcie każdego z tagów href w nagłówkach w nawiasy, tak aby Angular przejął kontrolę i aby te linki nigdzie się nie znajdowały. Zdarzenie kliknięcia będzie tą rzeczą, która zostanie odpalona. Tak więc, nagłówki powinny wyglądać następująco:

<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>

Przejdź do przeglądarki i przetestuj wszystkie swoje linki nagłówka tabeli. Powinieneś zobaczyć, że każda z naszych właściwości jest teraz sortowana, zarówno w porządku rosnącym, jak i malejącym. Wspaniale!

To jest świetne, ale straciliśmy jedną rzecz – nasz kursor jest selektorem, a nie wskaźnikiem. Naprawmy to za pomocą CSS.

Popraw kursor

Na naszej stronie zamówień sortowanie działa poprawnie, ale nasz kursor jest teraz selektorem zamiast wskaźnikiem, a to jest denerwujące.

Jest kilka różnych sposobów, na jakie możemy użyć CSS, aby to naprawić:

• Moglibyśmy stworzyć klasę w naszym głównym pliku SCSS aplikacji.
• Możemy napisać CSS w linii, chociaż to prawie nigdy nie jest preferowane.
• Moglibyśmy skorzystać ze skalowalnego CSS Angulara używając opcji styles w dekoratorze komponentu

Wybieramy ostatnią opcję, ponieważ wszystko co musimy zrobić to dodać jedną regułę do naszych stylów dla tego konkretnego komponentu.

Otwórz ponownie klasę komponentu orders. W dekoratorze komponentu możemy dodać nową właściwość o nazwie styles. Styles jest tablicą łańcuchów, ale te łańcuchy są regułami CSS. Aby naprawić nasz kursor, wystarczy napisać regułę, która mówi, że w wierszu tabeli, jeśli mamy link, należy zmienić właściwość cursor na pointer. Nasz dekorator będzie teraz wyglądał tak:

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

Teraz, gdy najedziemy na nagłówki naszych wierszy, zobaczysz, że mamy kursor wskaźnika. Co jest fajne w tym podejściu, to fakt, że ta reguła CSS nie będzie miała wpływu na żadne inne komponenty. Będzie ona miała zastosowanie tylko do naszego komponentu zamówień!

Teraz zobaczmy, czy możemy coś zrobić z naszym filtrowaniem. Ten „filtr filtrujący” został usunięty z Angulara, więc będziemy musieli być kreatywni i wymyślić sposób na zaimplementowanie go w naszym komponencie.

Krok 4 – Dodaj filtrowanie

Jesteśmy gotowi zastąpić nasze pole filtra, które używało filtra AngularJS do przeszukiwania kolekcji zamówień na podstawie ciągu znaków, który przeszukiwaliśmy. Filtr AngularJS znajdował się na naszym szablonie i nie wymagał żadnego kodu w naszym kontrolerze lub komponencie. W dzisiejszych czasach, tego typu logika w szablonie jest odradzana. Preferowane jest wykonywanie tego rodzaju sortowania i filtrowania w klasie naszego komponentu.

Add a Filter Function

Powracając do naszego komponentu, utworzymy nową tablicę zamówień o nazwie filteredOrders. Następnie przekażemy naszą tablicę orders do funkcji filtrującej, która ustawi tablicę filteredOrders. Na koniec, użyjemy tablicy filteredOrders w naszym szablonie w naszej *ngFor zamiast naszej oryginalnej tablicy. W ten sposób nigdy nie modyfikujemy danych, które wracają z serwera, używamy tylko ich podzbioru.

Pierwszą rzeczą, jaką zrobimy, jest zadeklarowanie nowej właściwości w naszej klasie :

filteredOrders: Order;

Potem, w naszym forkJoin, który ustawia naszą oryginalną tablicę zamówień, możemy ustawić stan początkowy filteredOrders na naszą tablicę zamówień:

this.filteredOrders = this.orders;

Teraz jesteśmy gotowi, aby dodać naszą funkcję, która faktycznie wykona dla nas filtrowanie. Wklejamy tę funkcję zaraz po funkcjach sortujących na dole naszego komponentu:

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

Porozmawiajmy o tym, co dzieje się w tej funkcji. Po pierwsze, dajemy funkcji właściwość string o wartości search. Następnie, zapętlamy nasze zamówienia i znajdujemy wszystkie klucze obiektów. Dla wszystkich kluczy sprawdzimy, czy istnieją some wartości tych właściwości, które pasują do naszego hasła. Ten fragment JavaScriptu może na początku wyglądać nieco zagmatwanie, ale w zasadzie to właśnie się dzieje.

Zauważ, że w naszej instrukcji if wyraźnie testujemy ciągi znaków. W naszym przykładzie ograniczymy nasze zapytanie tylko do łańcuchów. Nie będziemy próbować radzić sobie z zagnieżdżonymi właściwościami, właściwościami liczbowymi, ani niczym podobnym. Nasza wyszukiwana fraza będzie pasować do naszej właściwości customer name, a jeśli kiedykolwiek zdecydujemy się wyświetlić nasz adres lub jakąkolwiek inną właściwość łańcuchową, będzie ona również przeszukiwać te właściwości.

Oczywiście, moglibyśmy również zmodyfikować tę funkcję, aby testowała liczby lub przeszukiwała kolejną warstwę zagnieżdżonych obiektów, i to jest całkowicie zależne od Ciebie. Podobnie jak w przypadku sortowania, zaczniemy od implementacji demonstracyjnej i pozwolimy Ci użyć wyobraźni, aby uczynić ją bardziej złożoną.

Mówiąc o funkcji sortOrders, zanim przejdziemy dalej, musimy zrobić jeszcze jedną rzecz w komponencie. Musimy tylko zmodyfikować sortOrders, aby używał teraz filteredOrders, a nie naszego oryginalnego orders, ponieważ chcemy, aby filtr miał pierwszeństwo przed sortowaniem. Po prostu zmieńmy to na tak:

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

Teraz jesteśmy gotowi do zaimplementowania tego filtrowania w szablonie.

Dodaj filtrowanie do szablonu

Powróćmy do naszego szablonu i poprawmy go tak, aby używał naszego filtrowania.

Pierwszą rzeczą, jaką musimy zrobić, jest zastąpienie data-ng-model. Zamiast tego, użyjemy zdarzenia keyup, więc napiszemy „keyup” i otoczymy je nawiasem ((keyup)). Jest to zdarzenie wbudowane w Angulara, które pozwala nam na uruchomienie funkcji po wciśnięciu klawisza na wejściu. Ponieważ nazwaliśmy naszą funkcję filterOrders, która wcześniej była nazwą właściwości, którą przekazywaliśmy do filtra AngularJS, wystarczy dodać nawiasy obok niej. Nasze dane wejściowe wyglądają jak na razie tak:

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

Ale co przekazujemy do funkcji filter orders? Cóż, domyślnie zdarzenia przekazują coś, co nazywa się $event. To zawiera coś zwanego target, które następnie zawiera wartość wejścia. Jest jeden problem z używaniem $event. Bardzo trudno jest śledzić te mgławicowe typy, ponieważ target.value może być naprawdę czymkolwiek. To sprawia, że trudno jest debugować lub wiedzieć, jaki typ wartości jest oczekiwany. Zamiast tego, Angular ma naprawdę fajną rzecz, którą możemy zrobić, a mianowicie przypisać zmienną szablonową do tego wejścia.

Na szczęście Angular dostarcza nam metodę, dzięki której możemy to zrobić. Po naszym tagu wejściowym, możemy dodać znak hash (#), a następnie nazwę naszego pożądanego modelu. Nazwijmy go #ordersFilter. To naprawdę nie ma znaczenia, gdzie w tagu to umieścisz lub jak to nazwiesz, ale ja lubię umieszczać to po wejściu, abyś mógł złapać, który model jest powiązany z którym wejściem, jeśli tylko spojrzę w dół strony.

Teraz mogę przekazać tę zmienną do naszej funkcji filterOrders w zdarzeniu keyup. Nie potrzebujemy symbolu hash przed nią, ale musimy dodać .value. To spowoduje przekazanie rzeczywistej wartości modelu, a nie całego modelu. Nasze gotowe dane wejściowe wyglądają tak:

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

Na koniec musimy zmodyfikować nasz *ngFor, aby używał tablicy filteredOrders zamiast zwykłej tablicy orders:

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

Inspect the Product

Widzisz, jak bardzo czysty jest nasz szablon teraz, gdy nasze filtrowanie i sortowanie znajduje się w komponencie.

Sprawdźmy to teraz w przeglądarce. Jeśli wpiszemy jakiś tekst w polu, na przykład „sally”, powinniśmy zobaczyć, że nasze zamówienia się zmieniają, a sortowanie działa na wierzchu:

Absolutnie, zastąpiliśmy kolejną funkcję AngularJS!

Teraz musimy zrobić jeszcze tylko jedną rzecz w tym komponencie – naprawić rurę walutową.

Krok 5 – Naprawić rurę walutową

Naszym ostatnim akcentem jest aktualizacja dawnego filtra walutowego, który w Angularze nazywa się teraz rurą walutową. Musimy tylko dodać kilka parametrów do rury w szablonie, których nie musieliśmy podawać w AngularJS. Ta część różni się, jeśli używasz Angular 4 lub Angular 5:.

W Angular 4, zrób to:
<td>{{order.totalSale | currency:'USD':true}}</td>

W Angular 5+, zrób to:
<td>{{order.totalSale | currency:'USD':'symbol'}}</td>

Pierwszą opcją jest kod waluty (jest ich wiele, nie jesteś ograniczony do dolarów amerykańskich!). Druga to wyświetlanie symbolu. W Angular 4 jest to boolean, który wskazuje, czy użyć symbolu waluty czy kodu. W Angular 5+, opcje to symbol, code, lub symbol-narrow jako ciągi znaków.

Powinieneś teraz zobaczyć oczekiwany symbol:

I gotowe! Aby zobaczyć gotowy kod, sprawdź ten commit.

Wnioski

Wykonałeś świetną robotę, trzymając się tego do końca! Oto, co udało nam się osiągnąć w tym przewodniku:

1. Zastąpienie składni szablonów AngularJS składnią Angulara
2. Przeniesienie sortowania do komponentu
3. Użycie dziedziczonych stylów CSS
4. Przeniesienie filtrowania do komponentu
5. Zastąpienie filtra walut AngularJS rurką walutową Angulara

Gdzie powinieneś się stąd udać? Jest wiele rzeczy, które mógłbyś zrobić:

• Uczynić sortowanie bardziej wyrafinowanym (na przykład: czy porządkowanie powinno się zresetować lub pozostać takie samo, gdy użytkownik kliknie nowy nagłówek?)
• Uczynić filtrowanie bardziej wyrafinowanym (wyszukiwanie liczb lub zagnieżdżonych właściwości)
• Zmienić podejście na reaktywne. Mógłbyś słuchać obserwowalnych zmian wartości zamiast funkcji keyup i robić sortowanie i filtrowanie w nich. Używanie obserwowalnych pozwoliłoby ci również robić naprawdę fajne rzeczy, takie jak debounce the input!

.