Angularin lajittelusuodattimien päivittäminen

Esittely

AngularJS, AngularJS:n alkuperäisen tarjonnan yksi hyödyllisimmistä ominaisuuksista oli kyky suodattaa ja lajitella tietoja sivulla käyttäen vain mallimuuttujia ja suodattimia. Kaksisuuntainen datan sitominen voitti monet AngularJS:ään kääntyneet.

Tänä päivänä monet front-end-kehittäjät kuitenkin suosivat yksisuuntaista datan sitomista, ja nuo orderBy– ja filter-suodattimet ovat Angularin tulon myötä kadonneet. (Huomautus: käytän tässä artikkelissa koko ajan ”AngularJS:ää” viitaten 1.x:ään ja pelkkää ”Angularia” viitaten 2+:aan.)

Mutta miten meidän pitäisi saavuttaa sama vaikutus? Vastaus löytyy komponenteistamme, joten katsotaanpa ngUpgrade-projektia ja opitaan, miten se tehdään!

Vaihe 1 – Vedä koodi Gitistä

Vaiheittain käymme läpi juuri uudelleenkirjoitetun komponentin mallin päivittämisen. Sitten lisäämme lajittelun ja suodatuksen palauttaaksemme kaiken toiminnallisuuden, joka sillä oli AngularJS:ssä. Tämä on keskeinen taito, jota on kehitettävä ngUpgrade-prosessia varten.

Aloittaaksemme, ota hetki aikaa kloonataksesi käyttämämme esimerkkiprojektin (älä unohda ajaa npm install sekä public– että server-kansioissa). Tarkista tämä sitoumus lähtökohdaksemme:

git checkout 9daf9ab1e21dc5b20d15330e202f158b4c065bc3

Tämä esimerkkiprojekti on ngUpgrade-hybridiprojekti, joka käyttää sekä AngularJS 1.6:ta että Angular 4:ää. Siinä on toimiva Express API ja Webpack buildit sekä kehitystä että tuotantoa varten. Voit vapaasti tutkia, haarukoida sitä ja käyttää malleja omissa projekteissasi. Jos haluat tutustua tämän projektin versioon, joka käyttää Angular 5:tä, tutustu tähän repoon. Tämän tutoriaalin kannalta näiden kahden version välisillä eroilla ei ole väliä (huomautan kaikista pienistä asioista).

Vaihe 2 – AngularJS-syntaksin korvaaminen

Sovelluksemme tässä vaiheessa tilaukset-komponenttimme on kirjoitettu uudelleen Angularilla, ja kaikki sen riippuvuudet on injektoitu ja ratkaistu. Jos kuitenkin yrittäisimme ajaa sovellustamme, näkyisi konsolissa virheitä, jotka kertoisivat ongelmista mallimme kanssa. Tämä meidän on ensin korjattava. Korvaamme AngularJS-syntaksin tilausmallissa (orders/orders.html), jotta saamme reitin latautumaan ja tilaukset näkymään sivulla. Seuraavaksi korjaamme suodatuksen ja lajittelun.

Ensin meidän on päästävä eroon kaikista $ctrl-esiintymistä tässä mallineessa. Niitä ei enää tarvita Angularissa. Voimme vain tehdä Etsi ja korvaa -toiminnon etsiaksemme $ctrl. (huomaa piste) ja korvata sen tyhjällä.

Vaihdetaan nyt data-ng-click painikkeessamme rivillä 13. Angularissa käytämme ng-click:n sijasta vain click-tapahtumaa, ja sulkeissa ilmoitamme, että kyseessä on tapahtuma. Sulkumerkit ilmaisevat syötteen, ja sulkeet ilmaisevat tulosteen tai tapahtuman.

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

Sanomme tässä vain, että klikkaustapahtuman yhteydessä laukaistaan goToCreateOrder-funktio tilauskomponentissamme.

Ennen kuin jatkamme, todistetaan vielä hetki, että komponenttimme todella latautuu. Kommentoi pois koko div, joka lataa tilauksemme (riviltä 17 alkaen). Käyttääksesi sovellusta avaa terminaali ja suorita seuraavat komennot:

cd servernpm start

Tällöin Express-palvelin käynnistyy. Käyttääksesi Webpack dev-palvelinta avaa toinen terminaali ja suorita:

cd publicnpm run dev

(Voit pitää nämä prosessit käynnissä tämän tutoriaalin loppuosan ajan.)

Sinun pitäisi nähdä, että sovelluksemme latautuu jälleen. Jos siirryt Tilaukset-reitille, näet, että Tilaukset-komponentti näkyy oikein.

Voidaan myös napsauttaa Luo tilaus -painiketta, jolloin se lähettää meidät oikein Luo tilaus-reitillemme ja lomakkeellemme.

Palaamme takaisin HTML:n pariin. Poista tuo div-kommentti (sovelluksemme on taas rikki).

Korvataan kaikki loput instanssit data-ng-click tapahtumankäsittelijällä (click). Voit joko käyttää Find & Replace -ohjelmaa tai käyttää editorisi pikanäppäintä kaikkien esiintymien valitsemiseen (VS Code for Windowsissa tämä on Ctrl+Shift+L).

Seuraavaksi korvataan kaikki data-ng-show:n esiintymät *ngIf:llä. Angularissa ei itse asiassa ole suoraa vastinetta ng-show:lle, mutta se ei haittaa. On parempi käyttää *ngIf:ää, koska sillä tavalla todella lisäät ja poistat elementtejä DOM:sta sen sijaan, että vain piilottaisit ja näyttäisit niitä. Meidän tarvitsee siis vain etsiä data-ng-show:t ja korvata ne *ngIf:llä.

Loppujen lopuksi meidän on tehtävä kaksi asiaa korjataksemme taulukkomme rungon. Ensinnäkin korvaa data-ng-repeat *ngFor="let order of orders":llä. Huomaa, että poistamme myös orderBy– ja filter-suodattimet kyseiseltä riviltä, joten koko tr näyttää tältä:

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

Toiseksi voimme poistaa data-ng-esimerkin ennen href-linkkiä tilauksen yksityiskohtien reitille. AngularJS hoitaa edelleen reitityksen tässä, mutta meidän ei tarvitse enää käyttää tuota etuliitettä, koska tämä on nyt Angular-malli.

Jos katsomme sovellusta uudelleen, näet, että tilaukset latautuvat näytölle oikein:

Tässä on tietysti pari asiaa pielessä. Lajittelulinkit eivät enää toimi, ja nyt valuuttamme on jotenkin sekaisin, koska Angularin valuuttaputki on hieman erilainen kuin AngularJS:n vastaava. Siihen palataan vielä. Toistaiseksi tämä on hyvä merkki, koska se tarkoittaa, että datamme pääsee komponenttiin ja latautuu sivulle. Olemme siis saaneet tämän mallin perusteet muunnettua Angulariin. Nyt olemme valmiita käsittelemään lajittelua ja suodatusta!

Vaihe 3 – Lajittelun lisääminen

Tilauksemme latautuvat ruudulle, mutta meillä ei ole vielä tapaa järjestellä tai lajitella niitä. AngularJS:ssä oli todella yleistä käyttää sisäänrakennettua orderBy-suodatinta tietojen lajitteluun sivulla. Angularissa ei enää ole orderBy-suodatinta. Tämä johtuu siitä, että nyt suositellaan vahvasti siirtämään tällainen liiketoimintalogiikka komponenttiin sen sijaan, että se olisi mallissa. Näin me siis teemme tässä. (Huomaa: käytämme tässä vanhoja funktioita ja tapahtumia, emme reaktiivista lomakemallia.) Tämä johtuu siitä, että yritämme vasta ottaa pieniä askelia näiden asioiden ymmärtämisessä. Kun olet oppinut perusteet, jatka rohkeasti eteenpäin observablesin avulla!)

Lajittelu komponentissa

Poistimme jo orderBy-suodattimen ng-repeat:stä, kun muutimme sen *ngFor:ksi. Nyt teemme lajittelutoiminnon orders-komponenttiin. Voimme käyttää taulukkootsikoiden klikkaustapahtumia kutsuaksemme kyseistä funktiota ja välittää ominaisuuden, jonka mukaan haluamme lajitella. Aiomme myös laittaa tuon funktion vaihtamaan edestakaisin nousevan ja laskevan välillä.

Avataan orders-komponentti (./orders/orders.component.ts) ja lisätään luokkaan kaksi julkista ominaisuutta. Nämä vastaavat kahta ominaisuutta, joihin mallimme jo viittaa. Ensimmäisestä tulee sortType, jonka tyyppi on string. Toinen on sortReverse, jonka tyyppi on boolean, ja asetamme sen oletusarvoksi false. Ominaisuus sortReverse pitää vain kirjaa siitä, käännetäänkö järjestystä – älä pidä sitä nousevan tai laskevan synonyyminä.

Luokan otsikon julistuksen jälkeen pitäisi nyt olla tämä:

sortType: string;sortReverse: boolean = false;

Seuraavaksi lisäämme funktion, jota käytämme Array.sort-prototyyppifunktion kanssa JavaScriptissä. Lisää tämä goToCreateOrder-funktion jälkeen (mutta edelleen luokan sisällä):

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

Tämä dynaaminen lajittelufunktio vertaa objektien ominaisuuksien arvoja joukossa. Sisäkkäistä ternääristä funktiota voi olla hieman hankala ymmärtää ensi silmäyksellä, mutta pohjimmiltaan se vain sanoo, että jos ominaisuutemme A:n arvo on pienempi kuin B, palauta -1. Muussa tapauksessa, jos se on suurempi, palautetaan 1. Jos ne ovat yhtä suuret, palautetaan 0.

Nyt, tämä ei ole super hienostunut tai syvä vertailu. On olemassa paljon hienostuneempia apufunktioita, jotka voit kirjoittaa lajittelemaan puolestasi, ja kokeile vapaasti, miten voit rikkoa tämän. Se riittää kuitenkin meidän tarkoituksiimme, ja voit vain vaihtaa tämän logiikan mihin tahansa haluamaasi mukautettuun lajittelulogiikkaan.

Se on siis apufunktiomme. Array-prototyypin sort-funktiolle voidaan välittää funktio, jota se voi sitten käyttää vertaillakseen joukon kohteita. Tehdään luokkaamme sortOrders-niminen funktio, joka hyödyntää tätä uudella dynamicSort-funktiolla:

sortOrders(property) { }

Ensiksi meidän on asetettava luokkamme sortType-ominaisuus yhtä suureksi kuin välitetty ominaisuus. Sitten haluamme vaihtaa sortReverse-ominaisuutta. Saamme tämän:

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

Nyt voimme kutsua sort-funktiota this.orders:lle, mutta välittää dynaamisen lajittelufunktiomme ominaisuutemme kanssa:

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

Ja on vielä yksi asia, joka meidän täytyy tehdä. Meidän on muutettava dynamicSort-funktiotamme vain hieman, jotta voimme kääntää matriisin järjestyksen nousevaksi tai laskevaksi. Tätä varten sidomme dynamicSort:n tuloksen luokan sortReverse-ominaisuuteen.

Ensin julistamme muuttujan:

let sortOrder = -1;

Sitten voimme tarkistaa, onko luokkamme sortReverse-ominaisuus true vai false. Jos se on tosi, asetamme lajittelujärjestys-muuttujamme arvoksi 1:

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

Sitomme funktiomme yhteen näin, koska teemme lajittelufunktiossamme vaihtamisen havainnollistamisen vuoksi. Jos haluamme olla perusteellisempia, toinen lähestymistapa olisi, että sortReverse:n sijasta olisi muuttuja nimeltä sortDescending, jota ohjataan erillisellä funktiolla. Jos menet tätä reittiä, teet päinvastoin – sortOrder olisi 1, ellei sortDescending olisi tosi.

Voisimme myös yhdistää nämä kaksi viimeistä asiaa ternääriseksi lausekkeeksi, mutta selkeyden vuoksi jätän sen hieman sanattomammaksi. Jotta tuloksemme olisi päinvastainen kuin se normaalisti olisi, voin vain kertoa result:n sortOrder:llä. Joten dynamicSort-funktiomme näyttää nyt tältä:

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

Tämä on jälleen kerran lajittelun demonstraatiototeutus, jotta ymmärrät keskeiset käsitteet, jotka liittyvät mukautetun lajittelufunktion käyttämiseen komponentissasi.

Katsotaanpa, toimiiko lajittelu

Tähän mennessä olemme lisänneet luokkaamme dynamicSort-avustajafunktion ja sortOrders-funktion voidaksemme lajitella komponenttimme mallin sijasta.

Katsoaksemme, että nämä funktiot toimivat, lisätään oletuslajittelu ngOnInit-funktioomme.

Tilauksemme forkJoin sisällä, forEach-kohdan jälkeen, jossa lisäämme asiakkaan nimi -ominaisuuden, kutsumme this.sortOrders:tä ja välitämme ominaisuuden Kappaleiden kokonaismäärä:

this.sortOrders('totalItems');

Näytön päivittyessäsi sinun pitäisi huomata, että tilaukset lajitellaan Kappaleiden kokonaismäärän mukaan.

Nyt meidän täytyy vain toteuttaa tämä lajittelu mallissamme kutsumalla sortOrders-funktiota taulukon otsikkolinkkien kohdalta.

Lajittelun lisääminen malliin

Olemme saaneet sortOrders-funktiomme toimimaan oikein tilaukset-komponentissamme, mikä tarkoittaa, että olemme nyt valmiita lisäämään sen malliimme, jotta taulukkootsikot ovat jälleen klikattavissa.

Ennen kuin teemme sen, muutetaan ngOnInit-funktiomme oletuslajittelu pelkäksi ID:ksi:

this.sortOrders('id');

Tämä on hieman normaalimpaa kuin se, että käytämme nimikkeiden kokonaismäärää.

Nyt voimme työstää mallimme. Ensimmäiseksi haluamme kutsua sortOrders-funktiota kaikissa klikkaustapahtumissamme. Voit valita sortType =:n esiintymät ja korvata ne sortOrders(:lla. Sitten voit korvata ; sortReverse = !sortReverse:n esiintymät ):llä.

Meidän on myös korjattava kaksi ominaisuuden nimeä, jotka välitämme tässä sekä *ngIf-instansseissa. Korvaa orderId:n 3 esiintymää id:llä ja customername:n 3 esiintymää customerName:llä.

Viimeiseksi minun täytyy kääriä jokainen otsikoissa oleva href-tagi sulkuihin, jotta Angular ottaa sen haltuunsa ja nämä linkit eivät oikeastaan mene mihinkään. Klikkaustapahtuma on se asia, joka laukeaa. Otsikoiden pitäisi siis noudattaa tätä kaavaa:

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

Käy selaimessa ja testaa kaikki taulukkootsikkolinkkisi. Sinun pitäisi nähdä, että jokainen ominaisuutemme lajittelee nyt sekä nousevassa että laskevassa järjestyksessä. Mahtavaa!

Tämä on hienoa, mutta menetimme yhden asian – kursorimme on valitsija, ei osoitin. Korjataan se hieman CSS:llä.

Korjataan kursori

Lajittelumme toimii nyt oikein tilaussivullamme, mutta kursorimme on nyt valitsija eikä osoitin, ja se on ärsyttävää.

On olemassa pari eri tapaa, joilla voisimme käyttää CSS:ää tämän korjaamiseen:

• Voisimme tehdä luokan pääsovelluksemme SCSS-tiedostoon.
• Voisimme kirjoittaa in-line CSS:n, vaikka se ei ole melkein koskaan parempi vaihtoehto.
• Voisimme hyödyntää Angularin skaalattua CSS:ää käyttämällä komponentin koristeen styles-vaihtoehtoa

Voitamme valita viimeisen vaihtoehdon, koska meidän tarvitsee vain lisätä yksi sääntö tyyleihimme juuri tälle komponentille.

Avaa jälleen tilauskomponenttiluokka. Komponentin sisustajassa voimme lisätä uuden ominaisuuden nimeltä styles. Styles on joukko merkkijonoja, mutta merkkijonot ovat CSS-sääntöjä. Korjataksemme kursorimme, meidän tarvitsee vain kirjoittaa sääntö, joka sanoo, että jos taulukkorivillä on linkki, vaihdetaan kursori-ominaisuus osoittimeksi. Koristeemme näyttää nyt tältä:

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

Nyt, kun siirrymme rivin otsikoiden päälle, näet, että meillä on osoitinkursori. Tässä lähestymistavassa on hienoa se, että tämä CSS-sääntö ei vaikuta muihin komponentteihin. Se koskee vain tilauskomponenttiamme!

Katsotaan nyt, voimmeko tehdä jotain suodatuksellemme. Tuo ”suodatussuodatin” poistettiin Angularista, joten meidän on oltava luovia ja keksittävä tapa toteuttaa se komponenttiimme.

Vaihe 4 – Suodatuksen lisääminen

Olemme valmiita korvaamaan suodatinlaatikkomme, joka käytti aiemmin AngularJS:n suodatinta etsiessään tilausten kokoelmaa etsimämme merkkijonon perusteella. AngularJS-suodatin asui mallissamme eikä vaatinut mitään koodia kontrollerissamme tai komponentissamme. Nykyään tuollaista logiikkaa mallissa ei suositella. On parempi tehdä tällainen lajittelu ja suodatus komponenttiluokassamme.

Lisää suodatusfunktio

Takaisin komponentissamme teemme uuden tilausten joukon nimeltä filteredOrders. Sitten siirretään orders-massamme suodatinfunktioon, joka asettaa filteredOrders-massan. Lopuksi käytämme filteredOrders-mallimme *ngFor-joukkoa alkuperäisen joukkomme sijasta. Näin emme koskaan muuta palvelimelta takaisin tulevaa dataa, vaan käytämme vain osajoukkoa siitä.

Ensin julistamme uuden ominaisuuden luokkaamme :

filteredOrders: Order;

Silloin forkJoin:ssä, joka asettaa alkuperäisen tilausten joukkomme, voimme asettaa filteredOrders:n alkutilaksi tilausten joukkomme:

this.filteredOrders = this.orders;

Nyt olemme valmiita lisäämään funktiomme, joka itse asiassa tekee suodatuksen puolestamme. Liitä tämä funktio heti lajittelutoimintojemme jälkeen komponenttimme alaosaan:

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

Keskustellaanpa, mitä tässä funktiossa tapahtuu. Ensinnäkin annamme funktiolle merkkijono-ominaisuuden search. Sitten käymme läpi tilaukset ja etsimme kaikki objektien avaimet. Kaikkien avainten osalta katsomme, onko näissä ominaisuuksissa some-arvoja, jotka vastaavat hakusanaamme. Tämä osa JavaScriptistä voi aluksi näyttää hieman hämmentävältä, mutta periaatteessa juuri näin tapahtuu.

Huomaa, että if-lauseessamme testaamme nimenomaisesti merkkijonoja. Tämänhetkisessä esimerkissämme rajoitamme kyselyn vain merkkijonoihin. Emme yritä käsitellä sisäkkäisiä ominaisuuksia, lukuominaisuuksia tai muuta vastaavaa. Hakusanamme täsmää asiakkaan nimi -ominaisuuteemme, ja jos joskus päätämme näyttää osoitteen tai jonkin muun merkkijono-ominaisuuden, se hakee myös niiden kautta.

Voisimme tietysti myös muokata tätä funktiota testaamaan numeroita tai tarkastelemaan toista kerrosta sisäkkäisiä objekteja, ja se on täysin sinun päätettävissäsi. Aivan kuten lajittelun kanssa, aloitamme esittelytoteutuksella ja annamme sinun käyttää mielikuvitustasi tehdessäsi siitä monimutkaisemman.

Funktiosta sortOrders puheen ollen, ennen kuin siirrymme eteenpäin, meidän on tehtävä vielä yksi asia komponentille. Meidän on vain muutettava sortOrders käyttämään nyt filteredOrders:aa eikä alkuperäistä orders:aa, koska haluamme suodattimen olevan etusijalla lajitteluun nähden. Muuta se vain näin:

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

Nyt olemme valmiita toteuttamaan tämän suodatuksen mallissa.

Suodatuksen lisääminen malliin

Siirrymme takaisin malliimme ja korjaamme sen käyttämään suodatustamme.

Ensin meidän on korvattava data-ng-model. Sen sijaan käytämme keyup-tapahtumaa, joten kirjoitamme ”keyup” ja ympäröimme sen sulkuihin ((keyup)). Tämä on Angularin sisäänrakennettu tapahtuma, jonka avulla voimme suorittaa toiminnon syötteen näppäilemisen yhteydessä. Koska nimesimme funktiomme filterOrders, joka oli aiemmin sen ominaisuuden nimi, jonka välitimme AngularJS-suodattimeen, meidän tarvitsee vain lisätä sulkeet sen viereen. Syötteemme näyttää toistaiseksi tältä:

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

Mutta mitä välitämme suodattimen orders-funktioon? No, oletusarvoisesti tapahtumat välittävät jotain nimeltä $event. Tämä sisältää jotain nimeltä target, joka sitten sisältää syötteen arvon. $event:n käyttämisessä on yksi ongelma. On hyvin vaikeaa pitää kirjaa näistä sumuisista tyypeistä, koska target.value voi oikeastaan olla mitä tahansa. Tämä vaikeuttaa virheenkorjausta tai sen selvittämistä, minkä tyyppistä arvoa odotetaan. Sen sijaan Angularissa on todella näppärä asia, jonka voimme tehdä, nimittäin määrittää mallimuuttujan tälle syötteelle.

Onneksi Angular tarjoaa meille menetelmän, jolla voimme tehdä tämän. Voimme lisätä input-tunnisteemme jälkeen hash-merkin (#) ja sitten haluamamme mallin nimen. Kutsutaan sitä #ordersFilter. Sillä ei oikeastaan ole väliä, mihin kohtaan tagia laitat tämän tai miksi kutsut sitä, mutta haluan laittaa sen inputin jälkeen, jotta saat kiinni, mikä malli liittyy mihinkin inputiin, jos vain vilkaisen sivua alaspäin.

Nyt voin siirtää tuon muuttujan filterOrders-funktiomme keyup-tapahtumaan. Emme tarvitse hash-symbolia ennen sitä, mutta meidän on lisättävä .value. Tämä välittää mallin todellisen arvon eikä koko mallia. Valmis syötteemme näyttää tältä:

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

Viimeiseksi meidän on muutettava *ngFor-malliamme käyttämään filteredOrders-matriisia tavallisen orders-matriisin sijaan:

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

Tarkasta tuote

Voit huomata, kuinka paljon siistimpi malleistamme tulee nyt, kun suodatuksemme ja lajittelumme on komponentissa.

Tarkistakaamme nyt selaimessamme. Jos kirjoitat laatikkoon jotain tekstiä, kuten ”sally”, sinun pitäisi nähdä, että järjestyksemme muuttuu ja että lajittelu toimii sen päällä:

Hienoa, olemme korvanneet toisen AngularJS-ominaisuuden!

Nyt meillä on enää yksi viimeinen asia, joka meidän täytyy tehdä tälle komponentille – korjata valuuttaputki.

Vaihe 5 – Korjaa valuuttaputki

Viimeisenä askeleena päivitämme entisen valuuttasuodattimen, jota Angularissa kutsutaan nyt valuuttaputkeksi. Meidän tarvitsee vain lisätä putkeen mallissa pari parametria, joita meidän ei tarvinnut määrittää AngularJS:ssä. Tämä osa eroaa, jos käytät Angular 4:ää tai Angular 5:tä:.

Angular 4:ssä teet näin:
<td>{{order.totalSale | currency:'USD':true}}</td>

Angular 5+:ssa teet näin:
<td>{{order.totalSale | currency:'USD':'symbol'}}</td>

Ensimmäinen vaihtoehto on valuuttakoodi (niitä on paljon, et ole rajoitettu Yhdysvaltain dollareihin!). Toinen on symbolinäyttö. Angular 4:ssä tämä on boolean, joka ilmoittaa, käytetäänkö valuutan symbolia vai koodia. Angular 5+:ssa vaihtoehdot ovat symbol, code tai symbol-narrow merkkijonoina.

Sinun pitäisi nyt nähdä odotettu symboli:

Ja olemme valmiita! Jos haluat nähdä valmiin koodin, tutustu tähän commitiin.

Conclusion

Teit hienoa työtä pysyessäsi tässä loppuun asti! Tässä on, mitä olemme saaneet aikaan tässä oppaassa:

1. EngularJS:n template-syntaksin korvaaminen Angular-syntaksilla
2. Lajittelun siirtäminen komponenttiin
3. Skaalattujen CSS-tyylien käyttäminen
4. Suodatuksen siirtäminen komponenttiin
5. EngularJS:n valuuttasuodattimen korvaaminen Angularin valuuttaputkella

Missä sinun kannattaisi edetä tästä? On paljon asioita, joita voisit tehdä:

• Tehdä lajittelusta hienostuneempaa (esimerkiksi: pitäisikö järjestyksen nollautua vai pysyä samana, kun käyttäjä klikkaa uutta otsikkoa?)
• Tehdä suodatuksesta hienostuneempaa (numeroiden tai sisäkkäisten ominaisuuksien haku)
• Vaihtaa reaktiiviseen lähestymistapaan. Voisit kuunnella arvonmuutosten observablea keyup-funktion sijaan ja tehdä lajittelun ja suodatuksen siellä. Observablesin käyttäminen antaisi myös mahdollisuuden tehdä todella hienoja asioita, kuten debounce input!