Pętle za pomocą @for
Renderuj listy za pomocą @for i wyrażeń track.
Pętle za pomocą @for to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Wykonywanie pętli za pomocą for
Blok at-for powtarza zawartość dla każdego elementu kolekcji. Zastępuje starą dyrektywę star-ngFor i wymaga wyrażenia track.
Podstawowa składnia for
Należy zapisać symbol at, słowo for, następnie item of items oraz wymaganą klauzulę track wskazującą unikalny klucz.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// }Dlaczego track jest wymagane
Wyrażenie track informuje Angulara, jak rozpoznawać poszczególne elementy po zmianach, dzięki czemu może ponownie używać węzłów DOM zamiast tworzyć je od nowa. Znacznie poprawia to wydajność.
Śledzenie według tożsamości
Jeśli elementy nie mają stabilnego identyfikatora id (na przykład jest to lista prostych ciągów znaków), można śledzić je na podstawie samych elementów.
// @for (name of names; track name) {
// <li>{{ name }}</li>
// }Blok empty
Blok at-empty renderuje zawartość, gdy kolekcja nie zawiera żadnych elementów. Następuje po zamykającym nawiasie klamrowym bloku at-for.
// @for (item of items; track item.id) {
// <li>{{ item.name }}</li>
// } @empty {
// <li>No items found</li>
// }Zmienne kontekstowe
W bloku at-for dostępne są pomocne zmienne, między innymi index, count, first, last, even i odd. Można je przechwycić za pomocą let.
// @for (item of items; track item.id; let i = $index) {
// <li>{{ i }}: {{ item.name }}</li>
// }Zmienna index
Wartość dollar-index określa pozycję bieżącego elementu liczoną od zera. Często przypisuje się ją do zmiennej lokalnej za pomocą aliasu, jak pokazano powyżej.
first i last
Wartości logiczne dollar-first i dollar-last są prawdziwe odpowiednio dla pierwszego i ostatniego elementu. Przydają się do stylowania lub dodawania separatorów.
even i odd
Wartości logiczne dollar-even i dollar-odd ułatwiają stosowanie naprzemiennych stylów wierszy.
Wykonywanie pętli po sygnale
Kolekcja może pochodzić z sygnału — wystarczy wywołać go w wyrażeniu for.
// @for (todo of todos(); track todo.id) {
// <li>{{ todo.text }}</li>
// }Korzyść dla wydajności
Ponieważ track jest wymagane, nowy at-for działa szybciej niż star-ngFor bez trackBy, ponieważ Angular zawsze wie, jak dopasować elementy do węzłów DOM.
Szybkie sprawdzenie: pętle
Wymaganie dotyczące bloku for.
Podsumowanie: pętle
Poznali Państwo blok at-for z wymaganym wyrażeniem track, blok at-empty dla pustych kolekcji oraz zmienne kontekstowe, takie jak index, first, last, even i odd. Zastępuje on star-ngFor. Następnie poznają Państwo przełączanie za pomocą at-switch.
Często zadawane pytania
Czy lekcja „Pętle za pomocą @for” jest bezpłatna?
Tak — pełny tekst „Pętle za pomocą @for” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Pętle za pomocą @for”?
Renderuj listy za pomocą @for i wyrażeń track. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Pętle za pomocą @for”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Warunkowe renderowanie za pomocą @if
- Pętle za pomocą @for
- Przełączanie za pomocą @switch
- Odroczone ładowanie za pomocą @defer