Czym jest *ngFor w Angular?
*ngFor to dyrektywa strukturalna Angulara służąca do powtarzania fragmentu szablonu dla każdego elementu kolekcji, najczęściej tablicy.
Jeżeli komponent zawiera tablicę:
tags: string[] = ['tag1', 'tag2', 'tag3'];
to w szablonie można wygenerować osobny element HTML dla każdego wpisu:
<p *ngFor="let tag of tags">{{ tag }}</p>
Jak to działa?
Zapis:
*ngFor="let tag of tags"
oznacza: „dla każdego elementu tablicy tags utwórz ten element HTML, a aktualny element nazwij tag”.
Wynikiem będzie więc:
<p>tag1</p>
<p>tag2</p>
<p>tag3</p>
Ważne pojęcia
tags— tablica danych w komponencie,tag— zmienna lokalna dostępna tylko w danym obiegu pętli,{{ tag }}— interpolacja, czyli wstawienie wartości zmiennej do HTML,<p>— element HTML tworzony wielokrotnie.
Typowy błąd na egzaminie
*ngFor nie tworzy jednego paragrafu z całą tablicą. Tworzy osobny element HTML dla każdego elementu tablicy.