Angular ngFor – poznaj wszystkie funkcje, w tym trackBy, dlaczego nie tylko dla tablic?

W tym poście zajmiemy się dyrektywą rdzenia ngFor, a mianowicie zajmiemy się następującymi kwestiami:

• Co robi ngFor i jaka jest jej składnia
• Jakie są najczęstsze błędy związane z ngFor
• Widoczność zmiennych
• Znajdowanie pozycji indeksu elementu
• Jak zrobić ngFor? jak wyświetlić tabelę za pomocą even i odd
• Identyfikacja elementu first i elementu last listy
• Jak ngFor śledzi elementy, dlaczego może to być ważne dla wydajności?
• Jak używać trackBy?
• Kiedy używać trackBy?
• Dowiedz się dlaczego ngFor nie jest tylko dla tablic
• Szybkie pytanie do Ciebie na koniec o naukę

Zacznijmy więc nurkować w ngFor ! Poniżej możesz również znaleźć wersję wideo tego postu, jeśli wolisz, a działający kod tego postu jest dostępny tutaj.

Funkcje ngFor są również omówione w tym wideo, spójrz:

Co możemy zrobić z ngFor?

Konstrukcja ngFor pozwala nam na budowanie list prezentacji danych i tabel w naszych szablonach HTML. Weźmy na przykład następujące dane:

Z pomocą ngFor możemy wydrukować te dane na ekranie w formie tabeli danych, generując HTML podobny do tego:

Jaka jest składnia ngFor?

Aby użyć ngFor, stwórzmy komponent tak, abyśmy mogli mieć działający szablon HTML:

Ten szablon wygeneruje tabelę HTML, którą pokazaliśmy powyżej. W tym przykładzie możemy zobaczyć (najczęstszą) składnię dla użycia ngFor:

• przekazujemy do ngFor wyrażenie iteracyjne
• zmienna pętli o nazwie hero jest zdefiniowana za pomocą słowa kluczowego let, co jest zgodne ze składnią Javascript
• wyrażenie ma postać var i of items, co jest zgodne z funkcjonalnością iteracji Javascript of

Widoczność zmiennych

Zauważ, że zmienna pętli hero jest widoczna tylko wewnątrz pętli, nie byłbyś w stanie uzyskać do niej dostępu poza sekcją ngFor.

Common ngFor Errors to watch out for

Jeśli masz tło AngularJs, zobaczysz ten błąd kilka razy, zanim przyzwyczaisz się do nowej składni Angular:

Can't bind to 'ngFor' since it isn't a known property of 'tr'

Wynika to z tego, że przypadkowo albo użyłeś item in items zamiast item of items, albo zapomniałeś dodać słowa kluczowego let na początku wyrażenia:

Wyszukiwanie indeksu elementu listy

Bardzo częstym wymaganiem jest dodanie do listy numerycznej pozycji indeksu jej elementu. Możemy uzyskać indeks bieżącego elementu za pomocą zmiennej index:

Zauważ, że potrzebujesz słowa kluczowego let, aby uzyskać wartość indeksu, w przeciwnym razie otrzymasz błąd podobny do tego:

Parser Error: Unexpected token = at column ...

Po tej zmianie wygenerowany HTML wygląda teraz tak jak poniżej:

Jak rozebrać tabelę używając parzystych i nieparzystych

Kolejną bardzo częstą funkcjonalnością potrzebną przy budowaniu tabel jest możliwość rozebrania tabeli poprzez dodanie innej klasy css do parzystych lub nieparzystych wierszy.

Powiedzmy, że do powyższej tabeli chcemy dodać klasę CSS even jeśli wiersz jest parzysty oraz klasę CSS odd jeśli wiersz jest nieparzysty.

Aby to zrobić, mamy do dyspozycji kilka zmiennych: even oraz odd, które możemy wykorzystać w następujący sposób wraz z ngClass:

Przyjrzyjrzyjmy się HTML-owi wygenerowanemu przez ten szablon:

Jak widzimy, ngClass dodał klasy CSS do odpowiednich wierszy, tak jak byśmy tego oczekiwali.

Identyfikacja pierwszego i ostatniego elementu listy

Podobnie jak funkcjonalność parzystości i nieparzystości, istnieją również dwie inne zmienne, które mogą być użyte do identyfikacji pierwszego i ostatniego elementu listy:

To doda klasę CSS o nazwie first do pierwszego elementu listy oraz klasę CSS o nazwie last do ostatniego elementu listy:

Jak działa ngFor, gdy dodajemy lub usuwamy elementy z listy?

W miarę jak lista wejściowa będzie modyfikowana, ngFor będzie starał się unikać ciągłego tworzenia i niszczenia elementów DOM listy, ponieważ jest to kosztowna operacja. Ponadto, gdy przekażemy do ngFor nową listę, nie oznacza to, że cała lista zostanie zbudowana od nowa, czyli cały DOM zostanie stworzony od nowa.

Wiele z istniejących elementów DOM zostanie ponownie wykorzystanych, a tylko niektóre wartości wewnątrz nich zostaną nadpisane, a decyzja jest podejmowana dla każdego elementu listy osobno.

Aby podjąć taką decyzję Angular musi zidentyfikować każdy element listy w unikalny sposób, ponieważ na przykład jeśli przekażemy nową listę z inną kolejnością, Angular będzie próbował zidentyfikować elementy i zmienić kolejność elementów DOM listy bez usuwania ich i ponownego tworzenia.

Jak domyślnie śledzone są elementy listy?

ngFor domyślnie śledzi elementy listy używając tożsamości obiektów. Oznacza to, że jeśli zbudujemy od podstaw listę nowych obiektów z dokładnie takimi samymi wartościami jak poprzednia lista i przekażemy tę nowo zbudowaną listę do ngFor, Angular nie będzie w stanie stwierdzić, czy dany element listy jest już obecny czy nie.

Z punktu widzenia tożsamości obiektów, nowa lista zawiera zupełnie nowy zestaw elementów, zupełnie inny niż poprzedni zestaw. Tak jest w przypadku, gdy np. ponownie odpytamy dane z backendu.

Śledzenie po tożsamości obiektu jest dobrą domyślną strategią, ponieważ Angular nie posiada informacji o obiekcie, więc nie może powiedzieć, której właściwości powinien użyć do śledzenia.

Dlaczego może to być ważne dla wydajności?

Jak widzimy, ngFor już teraz wykonuje wiele optymalizacji out-of-the-box, aby spróbować ponownie wykorzystać istniejące elementy DOM tak bardzo, jak to możliwe, ale robi to w oparciu o tożsamość obiektu.

W przypadku szablonów z dużymi listami, lub listami które zajmują dużą część ekranu, możemy nawet z tymi optymalizacjami napotkać problemy z wydajnością i zauważyć, że UI jest powolne z powodu dużej ilości tworzonych i niszczonych elementów DOM.

Jeśli tak się stanie, możemy skonfigurować ngFor tak, aby śledzenie odbywało się na podstawie czegoś innego niż tożsamość obiektu.

Jak używać trackBy?

Możemy stworzyć własny mechanizm śledzenia elementów na liście używając trackBy. Musimy przekazać funkcję do trackBy, a funkcja przyjmuje kilka argumentów, którymi są indeks oraz bieżący element:

Ta implementacja wykonywałaby śledzenie na podstawie właściwości id.

Kiedy używać trackBy?

Użycie trackBy jest optymalizacją wydajności i zazwyczaj nie jest potrzebne domyślnie, w zasadzie jest potrzebne tylko wtedy, gdy pojawiają się problemy z wydajnością.

Powiedzmy, że wysyłasz do starożytnych przeglądarek mobilnych lub starożytnych wersji IE: możesz rozważyć zastosowanie trackBy jako środka ostrożności w większych tabelach, ale to naprawdę zależy od twojego systemu i przypadku użycia.

Czy ngFor jest tylko dla tablic?

W tym przykładzie, przekazywaliśmy do ngForan array of Javascript objects, ale tak naprawdę nie musimy koniecznie przekazywać tablicy do ngFor aby to działało.

Możemy przekazać do tego dowolny rodzaj Javascript Iterable w ogóle, włączając w to Iterables, które są tworzone przez sam framework. Aby to zilustrować, zdefiniujemy dyrektywę dla elementu konfiguracyjnego o nazwie hero:

Możemy teraz użyć tego elementu konfiguracyjnego w naszym szablonie w następujący sposób:

Zapytajmy teraz o te dane z elementów konfiguracyjnych używając @ContentChildren:

Widzisz co się tutaj stało? Okazuje się, że QueryList jest klasą, która jest częścią Angulara i sama jest Iterable! Więc mimo, że możemy użyć jej programowo w klasie komponentu, możemy również przekazać ją bezpośrednio do ngFor i bezpośrednio nad nią iterować.

I to samo można zrobić z każdą inną Iterable w naszym programie.

Mam nadzieję, że podobał Ci się ten wpis, zapraszam do zapoznania się z poniższą listą innych podobnych postów i zasobów na temat Angulara.

A jeśli chciałbyś dowiedzieć się więcej o bardziej zaawansowanych funkcjach Angular Core, takich jak ngFor, zalecamy sprawdzenie kursu Angular Core Deep Dive, gdzie szczegółowo omawiamy wszystkie dyrektywy Angular Core.

Zapraszam do zapisania się do naszego newslettera, aby otrzymywać powiadomienia, gdy pojawi się więcej postów takich jak ten:

Jeśli dopiero zaczynasz uczyć się Angulara, spójrz na kurs Angular dla początkujących:

Inne posty na temat Angulara

Jeśli podobał Ci się ten post, spójrz również na inne popularne posty, które mogą Cię zainteresować:

• Angular Router – How To Build a Navigation Menu with Bootstrap 4 and Nested Routes
• Angular Router – Extended Guided Tour, Unikaj typowych pułapek
• Angular Components – Podstawy
• Jak budować aplikacje Angular używając Observable Data Services – pułapki, których należy unikać
• Wprowadzenie do Angular Forms – Template Driven vs Model Driven
• Angular ngFor – Poznaj wszystkie cechy, w tym trackBy, dlaczego nie jest to tylko dla tablic?
• Angular Universal w praktyce – Jak budować przyjazne SEO aplikacje jednostronicowe za pomocą Angulara
• Jak naprawdę działa Angular Change Detection?
• Typescript 2 Type Definitions Crash Course – Typy i Npm, jak są powiązane? @types, Compiler Opt-In Types: When To Use Each and Why?