Angular Academy · Oppitunti

Silmukointi @for-lauseella

Renderöikää listoja @for-lauseella ja track-lausekkeilla.

Oppitunti 2/413 vaihetta

Silmukointi @for-lauseella on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Silmukointi for-rakenteella

at-for-lohko toistaa sisällön kokoelman jokaiselle alkiolle. Se korvaa vanhan star-ngFor-direktiivin ja edellyttää track-lauseketta.

for-rakenteen perussyntaksi

Kirjoittakaa at-symboli, sana for, sitten item of items ja pakollinen track-lauseke, joka määrittää yksilöllisen avaimen.

// @for (item of items; track item.id) {
//   <li>{{ item.name }}</li>
// }

Miksi track on pakollinen

track-lauseke kertoo Angularille, miten kukin alkio tunnistetaan muutosten välillä. Näin Angular voi käyttää DOM-solmuja uudelleen niiden luomisen sijaan, mikä parantaa suorituskykyä huomattavasti.

Identiteetin perusteella seuraaminen

Jos alkioilla ei ole pysyvää tunnistetta, kuten primitiivisistä merkkijonoista koostuvassa luettelossa, voitte seurata alkioita niiden itsensä perusteella.

// @for (name of names; track name) {
//   <li>{{ name }}</li>
// }

empty-lohko

at-empty-lohko renderöidään, kun kokoelma ei sisällä alkioita. Se sijoitetaan at-for-lohkon sulkevan aaltosulkeen jälkeen.

// @for (item of items; track item.id) {
//   <li>{{ item.name }}</li>
// } @empty {
//   <li>No items found</li>
// }

Kontekstimuuttujat

at-for-lohkon sisällä on käytettävissä hyödyllisiä muuttujia, kuten index, count, first, last, even ja odd. Voitte ottaa ne käyttöön let-määreellä.

// @for (item of items; track item.id; let i = $index) {
//   <li>{{ i }}: {{ item.name }}</li>
// }

index-muuttuja

dollar-index-arvo ilmoittaa nykyisen alkion nollapohjaisen sijainnin. Se annetaan usein paikalliselle muuttujalle aliaksena, kuten edellä näytettiin.

first ja last

dollar-first- ja dollar-last-totuusarvot ovat tosia ensimmäiselle ja viimeiselle alkiolle, joten ne ovat käteviä tyylien tai erottimien käsittelyssä.

even ja odd

dollar-even- ja dollar-odd-totuusarvot helpottavat vuorottelevien rivien tyylittelyä.

Silmukointi signaalin yli

Kokoelma voi tulla signaalista. Kutsukaa signaalia vain for-lausekkeessa.

// @for (todo of todos(); track todo.id) {
//   <li>{{ todo.text }}</li>
// }

Suorituskykyetu

Koska track on pakollinen, uusi at-for on nopeampi kuin star-ngFor ilman trackBy-määrettä: Angular tietää aina, miten alkiot yhdistetään DOM-solmuihin.

Pikatarkistus: silmukointi

for-lohkon vaatimus.

Vastaa interaktiivisessa oppitunnissa

Kertaus: silmukointi

Opitte käyttämään at-for-lohkoa ja sen pakollista track-lauseketta, at-empty-lohkoa tyhjille kokoelmille sekä kontekstimuuttujia, kuten index, first, last, even ja odd. Se korvaa star-ngFor-rakenteen. Seuraavaksi käsitellään vaihtamista at-switch-rakenteella.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Silmukointi @for-lauseella” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Silmukointi @for-lauseella”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Silmukointi @for-lauseella”?

Renderöikää listoja @for-lauseella ja track-lausekkeilla. Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Silmukointi @for-lauseella”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy