Jak korzystać z dyrektywy ngFor Angular

Angular używa dyrektyw do dynamicznego renderowania niektórych elementów HTML w Twojej witrynie. Jedną z dyrektyw strukturalnych, których możesz użyć, jest ngFor.

Dyrektywa ngFor umożliwia powtórzenie tego samego bloku określoną liczbę razy lub wykonanie pętli przez tablicę obiektów w celu wyświetlenia ich szczegółów. To potężne narzędzie, którego możesz nawet użyć do renderowania obiektów w innych obiektach.

Posiada również wiele funkcji, które mogą być przydatne w określonych scenariuszach. Obejmuje to znajdowanie pierwszego i ostatniego elementu lub pomijanie niektórych elementów.

Jak używać ngFor do zapętlania liczb statycznych?

Dyrektywa ngFor jest oparta na pętli for, jednej z wiele przydatnych pętli obsługiwanych przez JavaScript. Od obecnej wersji Angulara (14) będziesz musiał utworzyć tablicę zawierającą liczbę elementów, przez które chcesz przejść w pętli.

1. Możesz utworzyć listę w samym oświadczeniu ngFor. Poniższy kod powtórzy akapit pięć razy, używając indeksów od 0 do 4:

   <div *ngDla='niech pozycja [0, 1, 2, 3, 4]; niech i = indeks'>
   <p> To jest powtarzający się akapit: {{item}} </p>
   </div>

2. Ponieważ powyższa metoda może nie być odpowiednia dla dużych tablic, możesz również dynamicznie utworzyć tablicę w pliku TypeScript:

   eksport klasaPrzykładowa klasaprzyboryOnInit{
    liczby: tablica<numer> = [];
   konstruktor() {
   // Spowoduje to dynamiczne utworzenie następującej tablicy:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   ten.liczby = Szyk(10).wypełnić(1).map((x, i)=>i);
    }
   }

3. Następnie możesz przejść w pętli przez tablicę liczb w kodzie HTML:

   <div *ngDla='niech pozycja liczb; niech i = indeks'>
   <p>To jest powtarzający się akapit: {{item}}</p>
   </div>

Jak pomijać lub stylizować określone liczby

Możesz użyć dziwne lub nawet ngFor zmienne określające co drugą liczbę. Scenariusz, w którym może się to okazać przydatne, to stylizacja każdego nieparzystego lub parzystego wiersza w tabeli przy użyciu innego koloru.

1. W pliku CSS komponentu dodaj kilka nowych klas CSS. Oto style, których będziesz używać dla niektórych elementów o indeksach parzystych lub nieparzystych:

   .czerwony {
    kolor czerwony;
   }
   .niebieski { 
    kolor niebieski; 
   }
   

2. Zadeklaruj zmienne nieparzyste i parzyste w instrukcji ngFor. Są to zmienne, które Angular rozpozna. Przypisz czerwoną klasę CSS do liczb parzystych, a niebieską klasę CSS do liczb nieparzystych:

   <div *ngDla='niech pozycja liczb; niech nieparzysty = nieparzysty; niech parzyste = parzyste' [ngKlasa]="{czerwony: parzysty, niebieski: nieparzysty}">
   <p> To jest powtarzający się akapit: {{item}} </p>
   </div>

3. Uruchom swoją witrynę Angular za pomocą ng służyć i otwórz go w przeglądarce internetowej. Parzyste i nieparzyste elementy HTML będą się zmieniać między różnymi stylami w oparciu o ich klasę CSS:
4. Jeśli chcesz całkowicie pominąć każdą parzystą liczbę, możesz użyć dyrektywy ngIf. Spowoduje to pominięcie wszystkich liczb nieparzystych i wyświetlenie tylko liczb parzystych:

   <div *ngDla='niech pozycja liczb; niech parzyste = parzyste'>
   <p *ngJeżeli='nawet'> To jest powtarzający się akapit: {{item}} </p>
   </div>

Jak liczyć wstecz

Aby liczyć wstecz, możesz użyć tradycyjnych metod, takich jak odwracanie listy lub liczenie wstecz przez pętlę za pomocą indeksu.

1. Zadeklaruj zmienną indeksującą w instrukcji ngFor. W ngFor zacznij od długości tablicy i odejmij liczbę elementów, przez które już przeszedłeś:

   <div *ngDla="niech pozycja liczb; niech i = indeks;">
   <p> To jest powtarzający się akapit: {{numbers.length-i-1}} </p>
   </div>

2. Możesz również utworzyć listę odwróconą w pliku TypeScript:

   eksport klasaPrzykładowa klasaprzyboryOnInit{
    liczby: tablica<numer> = [];
    Lista odwrócona: Tablica<numer> = [];
   konstruktor() {
   ten.liczby = Szyk(10).wypełnić(1).map((x, i)=>i);
   ten.reversedList = ten.liczby.plaster().reverse();
    }
   }

3. Iteruj po odwróconej liście za pomocą ngFor:

   <div *ngDla='let pozycja reversedList; niech i = indeks'>
   <p> To jest powtarzający się akapit: {{item}} </p>
   </div>

Jak zmienić styl pierwszego i ostatniego elementu?

Możesz stylizować pierwszy i ostatni element oddzielnie od innych elementów, używając pierwszy oraz ostatni Zmienne kątowe. To jest alternatywa dla przy użyciu pseudoklas CSS tak jak :pierworodny.

1. W instrukcji ngFor zadeklaruj pierwszą i ostatnią zmienną. Użyj dyrektywy ngClass, aby przypisać niebieską i czerwoną klasę CSS w poprzednich krokach. Przypisz niebieską klasę CSS do pierwszego elementu, a czerwoną klasę CSS do ostatniego elementu:

   <div *ngDla='niech pozycja liczb; niech pierwszy = pierwszy; niech ostatni = ostatni' [ngKlasa]= "{niebieski: pierwszy, czerwony: ostatni}">
   <p> To jest powtarzający się akapit: {{item}} </p>
   </div>

Jak używać ngFor do iteracji obiektów?

Możesz użyć dyrektywy ngFor, aby przejść przez obiekty i uzyskać dostęp do ich indywidualnych zmiennych.

1. Utwórz listę obiektów w pliku TypeScript. W takim przypadku pojawi się lista osób wraz z ich danymi:

   eksport klasaPrzykładowa klasaprzyboryOnInit{
    ludzie = []; 
   konstruktor() {
   ten.ludzie = [
    { Imię: 'Jan', nazwisko: 'Kowal', zawód: 'Menedżer HR', data_początkowa: nowa data("2019-02-05") },
    { Imię: 'Mary', nazwisko: 'Johnson', zawód: 'Oficer techniczny', data_początkowa: nowa data("2016-01-07") },
    { Imię: 'William', nazwisko: 'brązowy', zawód: 'Specjalista ds. HR', data_początkowa: nowa data("2018-03-03") },
    ];
    }
   }

2. W HTML użyj pętli ngFor, aby przejść przez listę osób. Każda osoba będzie dostępna za pomocą osoba zmienny. Możesz użyć zmiennej person, aby uzyskać dostęp do atrybutów każdej osoby:

   <div *ngDla='niech osoba ludzi; niech i = indeks'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <p> {{osoba.zawód}} </p>
   <p> {{person.startDate}} </p>
   </div>

Jak używać zagnieżdżonego ngFor do wyświetlania obiektów wewnątrz innych obiektów?

Możesz użyć zagnieżdżonej pętli for, aby wyświetlić obiekty wewnątrz innych obiektów.

1. Zmodyfikuj listę osób. Każda osoba będzie miała listę kontaktów alarmowych. Przechowuj każdy kontakt alarmowy jako osobny obiekt:

   ten.ludzie = [
    {
    Imię: 'Jan',
    nazwisko: 'Kowal',
    kontakt w razie wypadku: [
    { Nazwa: 'Amanda Smith', relacja: 'Żona', telefon: '0441239876' },
    { Nazwa: 'Barry Smith', relacja: 'Syn', telefon: '0442239876'}
    ]
    },
    {
    Imię: 'Mary',
    nazwisko: 'Johnson',
    kontakt w razie wypadku: [
    { Nazwa: 'Mark Johnson', relacja: 'Mąż', telefon: '0443239876' }
    ]
    },
    ];

2. W kodzie HTML utwórz zagnieżdżoną pętlę wewnątrz oryginalnej pętli, aby przejść przez każdy kontakt alarmowy i wyświetlić jego szczegóły:

   <div *ngDla='niech osoba ludzi; niech i = indeks'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngDla='niech kontakt osoby.awaryjneKontakty; niech j = indeks'>
   <h5> Kontakt w razie wypadku: </h5>
   <p> {{Nazwa Kontaktu}} </p>
   <p> {{osoba.relacja}} </p>
   <p> {{osoba.telefon}} </p>
   </div>
   <br>
   </div>

Zapętlanie za pomocą ngFor w Angular

Możesz użyć dyrektywy strukturalnej ngFor, aby dynamicznie przechodzić przez elementy HTML na swojej stronie internetowej. Umożliwi to powtórzenie tego samego bloku dla wielu obiektów lub określoną liczbę razy.

Możesz również użyć go do innych sztuczek, takich jak pomijanie każdej liczby parzystej lub nieparzystej lub stylizowanie pierwszego i ostatniego elementu. Możesz go również użyć do dynamicznego renderowania wielu obiektów w innych obiektach.

Istnieją inne dyrektywy Angulara, których możesz użyć, aby uczynić swoją witrynę bardziej dynamiczną. Należą do nich ngIf, ngSwitch, ngStyle, ngClass i ngModel.