Az Angular rendezőszűrők frissítése

Bevezetés

AngularJS, Az AngularJS kezdeti kínálatának egyik leghasznosabb funkciója az volt, hogy az oldalon lévő adatokat csak sablonváltozók és szűrők segítségével szűrhetjük és rendezhetjük. A kétirányú adatkötés sok AngularJS-re áttérőt megnyert.

Most azonban sok front-end fejlesztő az egyirányú adatkötést részesíti előnyben, és ezek a orderBy és filter szűrők az Angular megjelenésével napvilágot láttak. (Megjegyzés: ebben a cikkben az “AngularJS”-t fogom használni az 1.x-re, és csak “Angular”-t a 2+-ra.)

De hogyan érjük el ugyanazt a hatást? A válasz a komponenseinkben rejlik, ezért nézzünk meg egy ngUpgrade projektet, és tanuljuk meg, hogyan kell ezt megtenni!

1. lépés – Pull Code from Git

Egy frissen átírt komponens sablonjának frissítését fogjuk végigjárni. Ezután hozzáadjuk a rendezést és a szűrést, hogy visszaállítsuk az AngularJS-ben meglévő összes funkcióját. Ez az ngUpgrade folyamathoz fejlesztendő kulcsfontosságú készség.

A kezdéshez szánjunk rá egy percet, hogy klónozzuk a mintaprojektet, amit használni fogunk (ne felejtsük el a npm install futtatását mind a public, mind a server mappákban). Nézd meg ezt a commitot a kiindulási pontunkhoz:

git checkout 9daf9ab1e21dc5b20d15330e202f158b4c065bc3

Ez a mintaprojekt egy ngUpgrade hibrid projekt, amely az AngularJS 1.6-ot és az Angular 4-et is használja. Van egy működő Express API-ja és egy Webpack buildje mind a fejlesztéshez, mind a termeléshez. Nyugodtan fedezd fel, forkold le, és használd a mintákat a saját projektjeidben. Ha szeretnéd megnézni ennek a projektnek egy Angular 5-öt használó változatát, nézd meg ezt a repót. Ennek a bemutatónak a céljai szempontjából a két verzió közötti különbségek nem számítanak (minden apróságra rámutatok).

2. lépés – Az AngularJS szintaxis lecserélése

Az alkalmazásunknak ebben a szakaszában a megrendelések komponensünket Angularban írjuk újra, az összes függőségét injektálva és feloldva. Ha azonban megpróbálnánk futtatni az alkalmazásunkat, hibákat látnánk a konzolon, amelyek a sablonunkkal kapcsolatos problémákra utalnak. Ezt kell először kijavítanunk. Lecseréljük az AngularJS szintaxisát a megrendelések sablonban (orders/orders.html), hogy az útvonal betöltődjön és a megrendelések megjelenjenek az oldalon. Ezután a szűrést és a rendezést javítjuk.

Az első dolog, amit tennünk kell, hogy megszabadulunk a $ctrl összes példányától ebben a sablonban. Az Angularban már nincs rájuk szükség. Egyszerűen elvégezhetünk egy keresést és cserét, hogy megkeressük az $ctrl.-et (figyeljük meg a pontot), és kicseréljük semmire.

Most cseréljük ki a data-ng-click-ot a gombunkban a 13. sorban. Angularban a ng-click helyett csak a click eseményt használjuk, zárójelben, hogy jelezzük, hogy ez egy esemény. A zárójelek bemenetet, a zárójelek pedig kimenetet vagy eseményt jelölnek.

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

Ezzel csak azt mondjuk, hogy a kattintás eseményre indítsuk el a goToCreateOrder függvényt a megrendelések komponensünkön.

Mielőtt folytatnánk, szánjunk egy percet arra, hogy bebizonyítsuk, hogy a komponensünk valóban betöltődik. Kommenteljük ki az egész div-t, amely betölti a megrendeléseinket (a 17. sortól kezdve). Az alkalmazás futtatásához nyissunk egy terminált, és futtassuk a következő parancsokat:

cd servernpm start

Ezzel elindítjuk az Express szervert. A Webpack dev szerver futtatásához nyissunk egy másik terminált, és futtassuk:

cd publicnpm run dev

(Ezeket a folyamatokat a bemutató további részében is futtathatjuk.)

Láthatjuk, hogy az alkalmazásunk ismét betöltődik. Ha a megrendelések útvonalra lépünk, láthatjuk, hogy a megrendelések komponens helyesen jelenik meg.

A megrendelés létrehozása gombra is kattinthatunk, és az helyesen fog átküldeni minket a megrendelés létrehozása útvonalunkra és űrlapunkra.

Oké, térjünk vissza a HTML-hez. Vegyük ki a div megjegyzést (az alkalmazásunk ismét elromlik).

Cseréljük ki az összes többi példányt data-ng-click a (click) eseménykezelővel. Használhatjuk a Find & Replace parancsot, vagy egyszerűen használhatjuk a szerkesztőnk gyorsbillentyűjét az összes előfordulás kiválasztására (a VS Code for Windows-ban ez a Ctrl+Shift+L).

A következő lépésben cseréljük le a data-ng-show összes előfordulását *ngIf-re. Az Angularban valójában nincs közvetlen megfelelője a ng-show-nak, de ez nem baj. Jobb, ha a *ngIf-t használjuk, mert így valóban hozzáadunk és eltávolítunk elemeket a DOM-ból, ahelyett, hogy csak elrejtenénk és megmutatnánk őket. Tehát csak annyit kell tennünk, hogy megkeressük a data-ng-show-jeinket, és kicseréljük *ngIf-re.

Végül két dolgot kell tennünk, hogy kijavítsuk a táblázattestünket. Először is, cseréljük ki a data-ng-repeat-at *ngFor="let order of orders"-ra. Vegyük észre, hogy a orderBy és filter szűrőket is eltávolítjuk ebben a sorban, így a teljes tr így néz ki:

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

Másrészt törölhetjük a data-ng előtagot a href link előtt a rendelés részletes útvonalához. Az AngularJS itt még mindig kezeli az útválasztást, de már nem kell használnunk ezt a prefixet, mivel ez most már egy Angular sablon.

Ha újra megnézzük az alkalmazást, láthatjuk, hogy a rendelések helyesen töltődnek be a képernyőre:

Egy pár dolog persze nem stimmel. A rendező linkek már nem működnek, és most a valutánk is eléggé összekuszálódott, mert az Angularban a valutapipa kicsit más, mint az AngularJS megfelelője. Erre majd rátérünk. Egyelőre ez egy nagyszerű jel, mert azt jelenti, hogy az adataink eljutnak a komponenshez és betöltődnek az oldalra. Megvannak tehát a sablon alapjai Angularra konvertálva. Most már készen állunk, hogy nekilássunk a rendezésnek és szűrésnek!

3. lépés – Rendezés hozzáadása

A megrendeléseink betöltődnek a képernyőn, de még nincs módunk a rendezésre vagy a válogatásra. Az AngularJS-ben nagyon gyakori volt, hogy a beépített orderBy szűrőt használtuk az oldalon lévő adatok rendezésére. Az Angular már nem rendelkezik orderBy szűrővel. Ez azért van, mert most már erősen ajánlott az ilyen üzleti logikát a komponensbe áthelyezni, ahelyett, hogy a sablonban lenne. Szóval, ezt fogjuk itt csinálni. (Megjegyzés: itt egyszerű régi függvényeket és eseményeket fogunk használni, nem pedig egy reaktív űrlap-megközelítést. Ez azért van, mert csak kis lépésekkel próbáljuk megérteni ezeket a dolgokat. Ha már az alapokat elsajátítottuk, nyugodtan haladjunk tovább a megfigyelhetőségekkel!)

Válogatás a komponensben

A ng-repeat-ből már eltávolítottuk a orderBy szűrőt, amikor *ngFor-re változtattuk. Most egy rendezési funkciót fogunk készíteni a megrendelések komponensben. A táblázatfejléceink kattintási eseményeit használhatjuk a függvény meghívására, és átadhatjuk a tulajdonságot, amely alapján rendezni szeretnénk. Azt is el fogjuk érni, hogy ez a függvény előre-hátra váltogasson a növekvő és a csökkenő között.

Nyissuk meg a megrendelések komponenst (./orders/orders.component.ts), és adjunk hozzá két nyilvános tulajdonságot az osztályhoz. Ezek megegyeznek majd azzal a két tulajdonsággal, amelyre a sablonunk már hivatkozik. Az első a sortType típusú string lesz. A második a sortReverse típusú boolean lesz, és az alapértelmezett értéket false-ra állítjuk. A sortReverse tulajdonság csak azt tartja számon, hogy megfordítjuk-e a sorrendet – ne úgy gondoljunk rá, mint a növekvő vagy a csökkenő sorrend szinonimájára.

Az osztályban a cím deklarációja után tehát most már ennek kell állnia:

sortType: string;sortReverse: boolean = false;

A következő lépésben hozzáadjuk azt a függvényt, amelyet a JavaScriptben az Array.sort prototípus függvénnyel fogunk használni. Ezt adjuk hozzá a goToCreateOrder függvény után (de még mindig az osztályon belül):

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

Ez a dinamikus rendezési függvény összehasonlítja a tömbben lévő objektumok tulajdonságértékét. A beágyazott terner függvényt első ránézésre kissé nehéz megérteni, de alapvetően csak annyit mond, hogy ha A tulajdonságunk értéke kisebb, mint B, akkor -1-et adjunk vissza. Ellenkező esetben, ha nagyobb, adjunk vissza 1-et. Ha a kettő egyenlő, akkor 0-t ad vissza.

Na most ez nem egy szuper kifinomult vagy mély összehasonlítás. Vannak sokkal kifinomultabb segédfüggvények, amiket megírhatsz, hogy rendezzenek helyetted, és nyugodtan kísérletezz azzal, hogyan tudod ezt megtörni. A mi céljainkra azonban megteszi, és ezt a logikát egyszerűen kicserélheted bármilyen egyéni rendezési logikára, amit csak akarsz.

Ez tehát a mi segédfüggvényünk. A sort függvénynek az Array prototípuson átadhatunk egy függvényt, amit aztán a tömb elemeinek összehasonlítására használhat. Készítsünk egy sortOrders nevű függvényt az osztályunkon, amely ezt kihasználja az új dynamicSort függvénnyel:

sortOrders(property) { }

Az első dolog, amit tennünk kell, hogy az osztályunk sortType tulajdonságát egyenlőre állítjuk az átadott tulajdonsággal. Ezután a sortReverse tulajdonságot akarjuk átkapcsolni. Ez lesz:

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

Most meghívhatjuk a sort függvényt a this.orders-en, de átadjuk a dinamikus rendezési függvényünket a tulajdonságunkkal együtt:

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

És van még egy utolsó dolog, amit meg kell tennünk. Egy kicsit módosítanunk kell a dynamicSort függvényünket, hogy meg tudjuk fordítani a tömb sorrendjét növekvő vagy csökkenő sorrendre. Ehhez a dynamicSort eredményét az osztály sortReverse tulajdonságához kötjük.

Először is deklarálunk egy változót:

let sortOrder = -1;

Ezt követően ellenőrizhetjük, hogy az osztályunkon lévő sortReverse tulajdonságunk igaz vagy hamis. Ha igaz, akkor a sort order változónkat 1-re állítjuk:

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

A függvényeinket így kötjük össze, mert a szemléltetés kedvéért a sort függvényünkben egy váltást végzünk. Ha alaposabbak akarunk lenni, egy másik megközelítés az lenne, ha a sortReverse helyett egy sortDescending nevű változót használnánk, amelyet egy külön függvényen keresztül vezérelünk. Ha ezt az utat választjuk, akkor az ellenkezőjét tesszük – a sortOrder 1 lenne, ha a sortDescending nem lenne igaz.

Az utóbbi két dolgot kombinálhatnánk egy terner kifejezésbe is, de az áttekinthetőség kedvéért meghagyom egy kicsit bővebben. És akkor, hogy az eredményünk éppen az ellenkezője legyen annak, ami normális esetben lenne, egyszerűen megszorozhatom a result-et a mi sortOrder-ünkkel. Így a dynamicSort függvényünk most így néz ki:

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

Még egyszer, ez egy demonstrációs implementációja a rendezésnek, hogy megértsük a kulcsfogalmakat, amikor egy egyéni rendezési függvényt használunk a komponensünkön.

Lássuk, működik-e a rendezés

Ezidáig egy dynamicSort segédfüggvényt és egy sortOrders függvényt adtunk az osztályunkhoz, hogy a sablon helyett a komponensünkön tudjunk rendezni.

Hogy lássuk, hogy ezek a függvények működnek-e, adjunk hozzá egy alapértelmezett rendezést a ngOnInit függvényünkhöz.

A forkJoin előfizetésünkön belül, a forEach után, ahol hozzáadjuk a vásárló neve tulajdonságot, hívjuk meg a this.sortOrders függvényt, és adjuk meg az összes tétel tulajdonságot:

this.sortOrders('totalItems');

Amikor a képernyő frissül, látnunk kell, hogy a megrendelések az összes tétel alapján kerülnek rendezésre.

Most már csak ezt a rendezést kell megvalósítanunk a sablonunkon a sortOrders függvény meghívásával a táblázat fejlécében lévő linkekből.

Válogatás hozzáadása a sablonhoz

A sortOrders függvényünk megfelelően működik a megrendelések komponensünkön, ami azt jelenti, hogy most már készen állunk arra, hogy hozzáadjuk a sablonunkhoz, hogy a táblázatfejlécek ismét kattinthatóak legyenek.

Mielőtt ezt megtennénk, változtassuk meg az alapértelmezett rendezést a ngOnInit függvényünkben, hogy csak az ID legyen:

this.sortOrders('id');

Ez egy kicsit normálisabb, mint az összes tétel használata.

Most már dolgozhatunk a sablonunkon. Az első dolog, amit tenni akarunk, hogy meghívjuk a sortOrders függvényt az összes kattintási eseményünkben. Kiválaszthatjuk a sortType = példányait, és kicserélhetjük őket sortOrders(-ra. Ezután a ; sortReverse = !sortReverse példányait lecserélhetjük )-ra.

Az itt átadott két tulajdonságnevet is ki kell javítanunk, valamint a *ngIf példányokat. Cseréljük ki a orderId 3 példányát id-re, és a customername 3 példányát customerName-re.

Az utolsó dolog, amit meg kell tennem, hogy a fejlécekben lévő href címkék mindegyikét zárójelbe csomagolom, hogy az Angular átvegye, és ezek a linkek valójában ne menjenek sehova. A click esemény lesz az, ami elsül. Tehát a fejléceknek ezt a mintát kell követniük:

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

Ugorj át a böngészőbe, és teszteld az összes táblázat fejlécének linkjét. Látnod kell, hogy minden egyes tulajdonságunk most már sorba rendeződik, mind növekvő, mind csökkenő sorrendben. Félelmetes!

Ez nagyszerű, de egy dolgot elvesztettünk – a kurzorunk egy szelektor, nem pedig egy mutató. Javítsuk ki ezt egy kis CSS-szel.

Fix the Cursor

A rendezésünk helyesen működik a megrendelések oldalán, de a kurzorunk most egy szelektor, nem pedig egy mutató, és ez bosszantó.

Ez a probléma többféleképpen is megoldható CSS segítségével:

• Elkészíthetnénk egy osztályt a fő alkalmazásunk SCSS fájljában.
• Írhatnánk in-line CSS-t, bár ez szinte soha nem előnyös.
• Kihasználhatnánk az Angular scoped CSS előnyeit a komponens dekorátor styles opciójának használatával

Az utolsó lehetőséget választjuk, mert csak egy szabályt kell hozzáadnunk a stílusainkhoz az adott komponenshez.

Nyissuk meg újra a megrendelések komponens osztályt. A komponens dekorátorban hozzáadhatunk egy új tulajdonságot styles néven. A Styles egy stringekből álló tömb, de a stringek CSS szabályok. A kurzorunk javításához csak annyit kell tennünk, hogy írunk egy szabályt, amely kimondja, hogy egy táblázat sorában, ha van egy linkünk, akkor a kurzor tulajdonságot pointerre változtatjuk. A dekorátorunk mostantól így fog kinézni:

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

Most, amikor a sorfejlécünk fölé mutatunk, láthatjuk, hogy a mutató kurzorunk van. Az a klassz ebben a megközelítésben, hogy ez a CSS-szabály semmilyen más komponensre nem lesz hatással. Csak a rendelések komponensünkre fog vonatkozni!

Most nézzük meg, hogy tudunk-e valamit kezdeni a szűrésünkkel. Ezt a “szűrőszűrőt” eltávolították az Angularból, így kreatívnak kell lennünk, és ki kell találnunk, hogyan implementálhatjuk a komponensünkön.

4. lépés – Szűrés hozzáadása

Készen állunk arra, hogy lecseréljük a szűrőmezőnket, amely korábban az AngularJS szűrőjét használta a megrendelések gyűjteményének átkutatására egy keresett karakterlánc alapján. Az AngularJS szűrő a sablonunkon élt, és nem igényelt semmilyen kódot a vezérlőnkben vagy komponensünkben. Manapság ez a fajta logika a sablonban nem javasolt. Inkább a komponensosztályunkon végezzük el ezt a fajta rendezést és szűrést.

Add a Filter Function

A komponensünkben létrehozunk egy új, filteredOrders nevű tömböt a megrendelésekből. Ezután átadjuk a orders tömbünket egy szűrőfüggvénybe, amely beállítja a filteredOrders tömböt. Végül a filteredOrders-t fogjuk használni a sablonunkban a *ngFor tömbünkben az eredeti tömbünk helyett. Így soha nem módosítjuk a szerverről visszaérkező adatokat, csak egy részhalmazát használjuk.

Először is deklaráljuk az új tulajdonságot az osztályunkon :

filteredOrders: Order;

Ezután a forkJoin-ben, amely beállítja a megrendelések eredeti tömbjét, beállíthatjuk a filteredOrders kezdeti állapotát a megrendelések tömbünkre:

this.filteredOrders = this.orders;

Most készen állunk arra, hogy hozzáadjuk a függvényünket, amely ténylegesen elvégzi helyettünk a szűrést. Illesszük be ezt a függvényt közvetlenül a rendezési függvényeink után a komponensünk alján:

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

Mondjuk el, mi történik ebben a függvényben. Először is, megadjuk a függvénynek a search string tulajdonságot. Ezután végighaladunk a megbízásokon, majd megkeressük az objektumok összes kulcsát. Az összes kulcs esetében megnézzük, hogy vannak-e olyan some értékek azokban a tulajdonságokban, amelyek megfelelnek a keresőkifejezésünknek. A JavaScript ezen része elsőre kissé zavarosnak tűnhet, de alapvetően ez történik.

Megjegyezzük, hogy a if utasításunkban kifejezetten a karakterláncokat vizsgáljuk. A mostani példánkban a lekérdezésünket csak a karakterláncokra korlátozzuk. Nem próbálunk meg foglalkozni a beágyazott tulajdonságokkal, számtulajdonságokkal vagy bármi ilyesmivel. A keresőkifejezésünk az ügyfél neve tulajdonságra fog illeszkedni, és ha úgy döntünk, hogy megjelenítjük a címünket vagy bármilyen más karakterlánc tulajdonságot, akkor azokat is átnézi.

Természetesen módosíthatjuk ezt a függvényt úgy is, hogy számokra is teszteljük, vagy átnézzük a beágyazott objektumok egy másik rétegét, és ez teljesen rajtunk múlik. Akárcsak a rendezésnél, most is egy demonstrációs megvalósítással kezdünk, és hagyjuk, hogy a fantáziádat használd, hogy bonyolultabbá tedd.

Apropó, a sortOrders függvényről szólva, mielőtt továbblépnénk, még egy utolsó dolgot el kell végeznünk a komponenssel. Csak módosítanunk kell a sortOrders-et, hogy most már a filteredOrders-t használja, és ne az eredeti orders-ünket, mert azt akarjuk, hogy a szűrő elsőbbséget élvezzen a rendezéssel szemben. Csak változtassuk meg erre:

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

Most már készen állunk a szűrés megvalósítására a sablonon.

Szűrés hozzáadása a sablonhoz

Lépjünk vissza a sablonunkhoz, és állítsuk be, hogy használhassuk a szűrésünket.

Az első dolog, amit tennünk kell, az a data-ng-model kicserélése. Helyette a keyup eseményt fogjuk használni, ezért azt fogjuk írni, hogy “keyup”, és zárójelbe tesszük ((keyup)). Ez egy beépített esemény az Angularban, amely lehetővé teszi számunkra, hogy egy függvényt futtassunk egy bemenet leütésekor. Mivel a függvényünket filterOrders-nak neveztük el, ami korábban annak a tulajdonságnak a neve volt, amit az AngularJS szűrőjébe adtunk át, csak zárójelet kell tennünk mellé. A bemenetünk eddig így néz ki:

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

De mit adunk át a filter orders függvénybe? Nos, alapértelmezés szerint az események egy $event nevű valamit adnak át. Ez tartalmaz egy target nevű valamit, ami aztán a bemenet értékét tartalmazza. Van egy probléma a $event használatával. Nagyon nehéz nyomon követni ezeket a ködös típusokat, mert a target.value tényleg bármi lehet. Ez megnehezíti a hibakeresést, vagy azt, hogy tudjuk, milyen típusú értéket várunk. Ehelyett az Angular rendelkezik egy nagyon ügyes dologgal, amit megtehetünk, ami az, hogy egy sablonváltozót rendelünk ehhez a bemenethez.

Szerencsére az Angular biztosít számunkra egy módszert, amivel ezt megtehetjük. A bemeneti tagünk után hozzáadhatjuk a hash jelet (#), majd a kívánt modellünk nevét. Nevezzük el #ordersFilter-nek. Igazából mindegy, hogy ezt hova tesszük a tagben, vagy hogy minek nevezzük, de én szeretem a bemenet után tenni, hogy elkapjuk, melyik modell melyik bemenethez tartozik, ha csak végigpillantok az oldalon.

Most átadhatom ezt a változót a filterOrders függvényünkbe a keyup eseményen. Nincs szükségünk az előtte lévő hash szimbólumra, de a .value-et hozzá kell adnunk. Ez a modell aktuális értékét fogja átadni, nem pedig magát a teljes modellt. A kész bemenetünk így néz ki:

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

Végül módosítani kell a *ngFor-ünket, hogy a filteredOrders tömböt használja a szokásos orders tömb helyett:

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

Inspect the Product

Láthatjuk, mennyivel tisztább a sablonunk most, hogy a szűrésünk és a rendezésünk a komponensben van.

Most nézzük meg ezt a böngészőben. Ha beírunk valamilyen szöveget a mezőbe, például “sally”, akkor látnunk kell, hogy a sorrendünk változik, és hogy a rendezés is működik rajta:

Félelmetes, újabb AngularJS funkciót cseréltünk le!

Most már csak egy utolsó dolgot kell elvégeznünk ezen a komponensen – javítsuk ki a valutapipát.

5. lépés – A valutapipa javítása

Az utolsó simításunk a korábbi valutaszűrő frissítése, amit most az Angularban valutapipának hívnak. Csak néhány paramétert kell hozzáadnunk a sablonban a pipához, amit az AngularJS-ben nem kellett megadnunk. Ez a rész különbözik, ha Angular 4-et vagy Angular 5-öt használunk:.

Az Angular 4-ben ezt kell tennünk:
<td>{{order.totalSale | currency:'USD':true}}</td>

Az Angular 5+-ban ezt kell tennünk:
<td>{{order.totalSale | currency:'USD':'symbol'}}</td>

Az első lehetőség a valutakód (sok van, nem korlátozunk az amerikai dollárra!). A második a szimbólumok megjelenítése. Az Angular 4-ben ez egy boolean, ami azt jelzi, hogy a valuta szimbólumot vagy a kódot használja. Az Angular 5+-ban a lehetőségek a symbol, code vagy symbol-narrow, mint karakterláncok.

Most már látnod kell a várt szimbólumot:

És kész is vagyunk! Ha látni szeretné a kész kódot, nézze meg ezt a commitot.

Következtetés

Nagyszerű munkát végzett, hogy kitartott a végéig! Íme, mit értünk el ebben az útmutatóban:

1. Az AngularJS sablon szintaxis lecserélése az Angular szintaxisra
2. A válogatás áthelyezése a komponensbe
3. Scoped CSS stílusok használata
4. A szűrés áthelyezése a komponensbe
5. Az AngularJS valutaszűrő lecserélése az Angular valutapipára

Hova tovább? Rengeteg dolgot tehetnél:

• A rendezést kifinomultabbá tennéd (például: a sorrend visszaálljon vagy maradjon ugyanaz, amikor a felhasználó új fejlécre kattint?)
• A szűrést kifinomultabbá tennéd (számok vagy beágyazott tulajdonságok keresése)
• Váltás reaktív megközelítésre. A keyup függvény helyett figyelhetnél egy megfigyelhető értékváltozásokra, és ott elvégezhetnéd a rendezést és szűrést. A megfigyelhetőségek használatával olyan klassz dolgokat is megtehetnél, mint például a bemenet debounce-olása!