Angular: Wyświetlanie dynamicznych kolekcji

Angular 10+

0:00W naszej aplikacji pojawiła się zupełnie

0:03nowa sekcja moje ostatnie projekty i teraz cała ta treść.

0:08Cała ta sekcja jest zupełnie statyczne.

0:11Jest to po prostu jakiś przykładowy HTML i na razie jest OK.

0:15Działa ale powiedzmy że w przyszłości będę

0:17chciał często i regularnie aktualizować moje ostatnie projekty i nie chcę

0:22tutaj wchodzić kopiować tego HTML a zmieniać w HTML u tutaj obrazku treść itd.

0:28Chciałbym żeby ta cała sekcja tekstu wygenerować dynamicznie i żeby

0:33każdy taki element pojawił się dynamicznie jeśli po prostu zmienię jakieś dane.

0:37Czyli powiedzmy jakiś tam obrazek nazwa projektu i jakiś link.

0:45Chciałbym żeby one zostały stworzone dynamicznie na podstawie danych.

0:48Czyli zacznę od tego żeby utworzyć tutaj

0:50jakąś tablicę czyli powiedzmy ostatnie projekty.

0:56Ostatnie projekty

0:58i każdy z projektów będzie miał powiedzmy jakiś identyfikator unikalny

1:03nazwę i obrazek czyli nazwa projektu to

1:07będzie projekt tej wersji powiedzmy jego.

1:14I mieć

1:16obrazek to będzie tutaj jakiś przykładowy obrazek znaleziony w internecie.

1:23I na razie może linków sobie podróżujemy

1:25później damy opcję z linka ok czyli mamy tutaj tablicę

1:30obiektów i każdy z obiektów reprezentuje jeden z naszych projektów.

1:35Postęp HTML nie ma tej HTML nie ma wyglądu

1:37są czyste surowe dane może chociaż 3 różne projekty żebyśmy faktycznie widzieli.

1:46że mogę wyświetlić różne dane na podstawie tej tablicy.

1:53Czy chciałbyś żeby dla każdego elementu tej tablicy Amber wygenerował mi HTML.

1:58Ale chciałbym żeby ten HTML zawierał w środku różne dane różne

2:02informacje na podstawie właśnie tych parametrów jak możemy to zrobić.

2:07Przejdę do pliku HTML dołączona do

2:10komponentu com pozbędą się tych dwóch dodatkowych części

2:14czyli tych dwóch elementów dodatkowych tego i tego.

2:19Pozbędą się i chciałbym tylko tą część

2:22powtórzyć tyle razy ile mamy elementów w naszej kolekcji naszej tablicy

2:28też pamiętać żeby tworzyć dynamiczne elementy potrzeba szablonu Templeton.

2:33Teraz możemy użyć gwiazdki a się pokazać w

2:36jaki sposób działa taki mechanizm implantów od środka i Anti Temple.

2:41Tutaj będzie bardzo fajnym rozwiązaniem.

2:45Czyli teraz tak będzie tablet ponieważ ukryje ten element on zupełnie zniknie

2:50kontener będę miał szablon i teraz będzie Ford.

2:55To jest specjalna dyrektywa która pozwala z wielokrotnie w taki szablon na podstawie

2:59jakich danych ja tu przekażę dane jako parametr NG for

3:04off czyli dla każdego z po angielsku dla każdego z naszych projektów.

3:13Utwór taką kartę i spójrzmy jak to wygląda.

3:17Mam teraz trzy razy tą samą kartę jeśli bym u nas w danych powiedzmy

3:22dodał jeszcze dwa elementy to miałbym tutaj 5 elementów.

3:27Widzisz tyle elementów tutaj ile jest w tablicy tyle razy nasz Engine for

3:34tyle utworzy nam tutaj elementów HTML tylko jeden problem.

3:38Jak widzisz on cały czas ten sam element powtarza z dokładnie tymi samymi danymi.

3:45Teraz jak ja mogę dla każdego z tych elementów wygenerowanych ustawić inne dane

3:50poprzez tego fora inne parametry teraz co musimy zrobić musimy dowiedzieć

3:54się jakie dane udostępnia nam ten Engine for.

3:57Niestety spróbuję z kontrolerem

3:59zajrzeć do środka i jak zajrzymy do środka to okazuje się że

4:03Floor to jest nic innego jak klasa po prostu zwykłe teczki.

4:07Nowa klasa Onet ma wiązanie do kontenera czy na wie gdzie jest kontener.

4:13Ma nawiązanie do szablonu i ma do DivX czyli specjalnego kodu który

4:17porównuje dwie tablice i wie ile elementów ma wyświetlić.

4:21Elementów ma dodać G ma usunąć for.

4:24To że przekazujemy nasze parametry gdzieś tutaj zobaczymy kontener.

4:30Zobaczymy plakat.

4:31Okazuje się że nasz ten plakat ma także

4:34parametr czyli parametrem dla szablonu typem można powiedzieć szablonu

4:40jest tu kontekst czyli mamy coś specjalnego na NG FOR w kontekst

4:45i forów kontekst reprezentuje obiekt z parametrami z danymi które

4:51dostępne są dla każdej interakcji naszej pętli.

4:55Każdego będzie forma czy za każdym razem jeśli nam fort tworzy nowego drzewa z

5:00jakimiś danymi nowy element HTML to każdy taki element choć taki szablon ma

5:05dostęp do swojego obiektu kontekstu i ten kontekst zawiera takie dane jak np.

5:10kolejność ilość.

5:12Lista elementów ma informację czy jest

5:15pierwszym elementem ostatnim parzyste nieparzyste i najważniejsza rzecz

5:19implikuje i wskazuje na ten element na którym właśnie jesteśmy.

5:24Jeśli już mogę do niego dostać to za

5:27każdym razem będzie tam znajdował się inny obiekt.

5:30Czyli tutaj chciałbym powiedzmy coś zmienić.

5:33Niestety nie mogę po prostu napisać dolar

5:37CIT nawet dlatego że powiedzmy mieli kilka pętli

5:44no to nie wiadomo było do której ten się odwołuje czy do tej wewnętrznej

5:48zewnętrznej a całość musi mieć dostęp do kilku.

5:51Dlatego tak jak w zwykłej pętli FOR w

5:54krypcie jeśli eteru już masz pętlę to musisz nazwać zmienną która wskazuje na

6:00bieżący element tej pętli czyli termin NG for LED.

6:05Nazwę mają zmienną projekt na przykład i pisze do niej wartość tej zmiennej.

6:13Tu i teraz mogę tym zmiennej

6:15projekt użyć w tym miejscu żeby wyświetlić tekst lub żeby dostać się np.

6:21do obrazka.

6:23Czyli tu mogę już teraz projekt i miecz podpowiada mi prawidłowo.

6:28I zobaczymy teraz jak to będzie wyglądało. Ok.

6:32Czy jak widzisz znowu mamy ten sam efekt.

6:35Ale jest bardzo istotna różnica.

6:37Tym razem nie muszę kopiować zmieniać

6:38ręcznie HTML a mój HTML jest zupełnie odizolowany od moich danych.

6:42Wystarczy że dam mu inną tablicę co ładuje inne dane.

6:46Anglia dynamicznie powtórzył ten element tyle razy ile trzeba

6:49i wypełni każdą możliwą odpowiednimi danymi byśmy mieli do obrazka

6:55do opisu do linka dowolnych innych danych które będziemy chcieli użyć.

7:00Czy widzisz for pozwala mi z wielokrotnie jakiś fragment przejść do Anglii który

7:04tworzy niszczy ten wielokrotnie ale dodatkowo do każdej utworzonej kopii

7:10tego szablonu możemy wstrzymać jakieś dane i dać im naszą nazwę którą potrzebujemy.

7:16Tak jak pamiętasz te dodatkowe informacje.

7:20Czyli jeśli dam sobie jeszcze zmienną Let

7:24Last powiedzmy ostatni Left Forest pierwszy no to teraz mogę np.

7:33użyć tych informacji.

7:34Proszę państwa mnie też będzie klas

7:36i przypisać sobie specjalne klasy czyli powiedzmy First projekt.

7:44Jeśli zmienna First równa się King Last projekt Jeśli zmienna last.

7:55Równa się czy tak że te dodatkowe informacje

7:59wyciągnąć z będzie fora i ta zbada moje projekty to będę mógł np.

8:03określić sobie tutaj specjalną klasą informację czy to jest pierwszy czy

8:08ostatni projekt czyli te wszystkie informacje możemy także wykorzystać

8:13tak jak komentarz na Emilii Plater możemy zacząć krócej czyli zamiast

8:18definiować w ten sposób to pokaże ci jak możemy to zapisać krócej.

8:23Wystarczy że na elemencie który Chcemy

8:25otoczyć tabletem dodamy atrybut z gwiazdką będzie atrybut for.

8:33I teraz bardzo ciekawa rzecz bo te

8:34wszystkie atrybuty kiepskie parametry nie muszą już rozbijać tylko mógł zabić

8:39wszystkie jednym ciągiem po prostu po gwiazdkę czyli end for Let projekt.

8:45Jeśli pominąć zmienną i

8:48ta pierwsza zmienna Impact oraz domyślne czyli gminę to domyślnie projekt będzie

8:53wskazywał na tą wersję to opcji jest parametr off czyli powtarzamy co powtarzam

9:00ostatnie projekty jeśli dodatkowe parametry użyć

9:03rozdzielczość średni czas krypcie i to samo Let Last last

9:10I Lead First równa się First nie może zmieni tę nazwę żeby nam

9:15się nie mówiło czy to są nasze tutaj X Last i to będzie moja zmienna.

9:22I teraz mogę w sensie

9:24na tym samym elemencie użyć dlatego że już wiesz że tak naprawdę tak maska sprawia że

9:29FOR wykonywany jest najpierw wykonuje szablon

9:33i tworzy te zmienne dla szablonu czy szablon możemy je wykorzystać.

9:38Czy ja mam ten długi zapis pełen

9:41dzięki czemu rozumiesz które elementy odpowiadają co one znaczą.

9:45I możemy to zwinąć do jednego wora który

9:49wygląda jak taki zwykły fort działa skrycie lecz zmienna tablica ale dodatkowo

9:54musimy wyciąć sobie taką informację jak pierwszy ostatni czy np.

9:58mogę sobie LED.

10:00I to się równa indeks.

10:02Jeśli chce dokładnie znać pozycję numer tego elementu już innego zapisu użyć.

10:07Możemy sobie to także jako indeks przypisać do zmiennej i np.

10:14w każdym projekcie.

10:16Tutaj mógłbym sobie użyć np.

10:18+1 żeby sobie numerowane kolejność tych naszych projektów.

10:23Pierwszy projekt. Drugi projekt.

10:25Trzeci projekt w ten sposób jak widzisz NG for

10:30Enterprise gwiazdką i kontener pozwala robić to samo co on 9 Switch ale

10:35tutaj ilość elementów nie jest ograniczona a dodatkowo możemy przechować dane w każdy

10:40z tych elementów i dane z tablicy możemy wyciągnąć i burzyć wielokrotnie w tym

10:46samym szablon z tablicą wielu różnych elementów.