Angular - dyrektywy strukturalne ngIf, ngFor i ngSwitch
Stronę tą wyświetlono już: 3653 razy
Wstęp
Dyrektywy strukturalne służą do sterowania wyglądem widoku strony. Każda taka dyrektywa wyróżnia się znacznikiem * wstawianym przed jej nazwą. Ważne jest aby pamiętać, że Angular umożliwia nałożenie na jeden element HTML tylko jednej dyrektywy strukturalnej. Dostępne dyrektywy strukturalne to:
- ngIf - steruje elementem drzewa DOM usuwając lub dodając element gdy dany warunek jest spełniony;
- ngSwitch - przełącza widoki ale nie usuwa z kodu strony elementu przełączanego a jedynie go wykomentowuje;
- ngFor - steruje elementem drzewa DOM poprzez iterowanie przez tablicę obiektów
Dyrektywa ngIf
Jak już wspominałem dyrektywa ngIf usuwa lub dodaje dany element do drzewa DOM. Sposób jej użycia można zobaczyć poniżej:
W powyższym kodzie ostatni element HTML ma znacznik #enabled, który oznacza zmienną podpiętą pod ten konkretny element drzewa DOM, za pomocą której można się do tego elementu z poziomu kodu HTML odwoływać. Zmienna ta została wykorzystana w dyrektywie ngIf do przełączania widoku.
Namiastka tego, jak by to działało przynajmniej wizualnie pokazana została poniżej. Należy jednak mieć na uwadze, że poniższy efekt został uzyskany przy wykorzystaniu czystego JavaScript-u.
Dla porównania kod generujący powyższy przykład z wykorzystaniem JavaScript-u wygląda tak:
Dyrektywa ngSwitch
Dyrektywa ngSwitch pozwala na przełączanie wyświetlanych elementów. Oto przykład kodu HTML wykorzystującego tę dyrektywę:
Natomiast w klasie komponentu potrzebne jest jeszcze pole o nazwie value i metoda przełączająca wartość tego pola:
Ważne jest, aby zdawać sobie sprawę, że ta dyrektywa nie usuwa elementów z drzewa DOM a jedynie je wykomentowuje. Oto jak wygląda kod HTML elementów sterowanych przez tą dyrektywę:
Jak widać kod ten wykomentowuje te elementy, dla których wartość warunkowa nie została spełniona.
Dyrektywa ngFor
Ostatnia dyrektywa daje możliwość wstawiania w kodzie elementów np. tablicy wartości, które mogą być obiektami lub zwykłymi wartościami liczbowymi. Oto jak w łatwy sposób można wypisywać elementy zapisane w zmiennej tablicowej wewnątrz kodu HTML komponentu z wykorzystaniem dyrektywy ngFor:
W kodzie klasy komponentu potrzebny będzie interfejs do przechowywania obiektów samochodu:
Natomiast w kodzie klasy potrzebne są pola, przechowujące tytuły nagłówka tabeli oraz jej dane:
Przybliżony wynik działania takiego kodu można zobaczyć poniżej (formatowanie pozostawiłem nie ruszone dając do zrozumienia, że tablica w ten sposób wygenerowana wymaga jeszcze dopracowania przy pomocy styli).
Marka samochodu | V Max [km/h] | Przyspieszenie w s od 0 do 100 km/h | Moc KM |
---|---|---|---|
Ford Mustang | 250 | 6.5 | 250 [KM] |
Ford T | 30 | 30 [KM] | |
Ferrari F50 | 325 | 3.7 | 520 [KM] |
Dyrektywa ngFor umożliwia również dostęp do kilku przydatnych zmiennych takich jak:
- index - indeks elementu;
- even - zmienna typu boolean zawierająca true gdy indeks rekordu jest liczbą parzystą;
- odd -zmienna typu boolean zawierająca true gdy indeks rekordu jest liczbą nieparzystą;
- first - zmienna przechowująca pierwszy rekord danych;
- last - zmienna przechowująca ostatni rekord danych;
- trackBy - parametr, do którego można przypisać funkcję, która zoptymalizuje odświeżanie danych w tabeli poprzez wykrywanie zmiany np. po id
Prosty przykład kodu, który wykorzystuje część powyżej wymienionych zmiennych wygląda w HTML-u tak:
Zaś w kodzie klasy komponentu:
Dyrektywa ngClass umożliwia przełączanie klas styli w zależności od zmiennych odd i even.
Nr. | Marka samochodu | V Max [km/h] | Przyspieszenie w s od 0 do 100 km/h | Moc KM |
---|---|---|---|---|
1 | Ford Mustang | 250 | 6.5 | 250 [KM] |
2 | Ford T | 30 | 30 [KM] | |
3 | Ferrari F50 | 325 | 3.7 | 520 [KM] |
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman
Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta
Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri
Tytuł:
Angular w akcji
Autor:
Jeremy Wilken
Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis
Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman
Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev
Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz