Jak korzystać z wbudowanej dyrektywy kątowej: ngIf, ngFor, ngClass i więcej

Możesz dodać dyrektywy do kodu HTML w swoim projekcie Angular. Niektóre kontrolują strukturę znaczników, podczas gdy inne skupiają się na atrybutach.

W tym artykule omówimy sześć najpopularniejszych dyrektyw Angular: ngFor, ngIf, ngClass, ngStyle, ngModel i ngSwitch.

Czym są dyrektywy kątowe?

Dyrektywy Angular umożliwiają używanie instrukcji if i pętli for oraz dodawanie innych zachowań do kodu HTML projektu Angular.

Dyrektywa	Opis
*ngIf	Możesz użyć ngIf, jeśli chcesz, aby niektóre bloki HTML były wyświetlane tylko wtedy, gdy spełniają określony warunek. Na przykład, jeśli masz formularz z wyskakującym okienkiem, które wyświetla się po wprowadzeniu przez użytkownika danych wejściowych dla określonego pola.
*ngFor	Możesz użyć ngFor, jeśli chcesz, aby pewien blok był powtarzany wiele razy. Na przykład, jeśli masz listę przedmiotów i musisz wyświetlić div dla każdego przedmiotu.
*ngKlasa	Dodaje styl warunkowy przy użyciu klasy. Jeśli instrukcja if spełnia warunek, zastosuje określoną klasę.
*ngStyle	Dodaje to warunkową stylizację w linii. Jeśli instrukcja if spełnia warunek, zastosuje określone style. instagram viewer
*ngModel	Pozwala to na wykonanie dwukierunkowego wiązania. Oznacza to, że możesz przekazywać dane w obu kierunkach między plikiem HTML i TypeScript. Na przykład można przekazać wartość atrybutu z pliku TypeScript do pliku HTML i na odwrót.
*ngSwitch	Umożliwia to dodanie instrukcji switch z wieloma przypadkami w celu sprawdzenia wielu wartości. W zależności od przypadków pokażą się niektóre elementy HTML.

Dyrektywy strukturalne dotyczą struktury elementów HTML. Należą do nich ngIf, ngFor i ngSwitch. Dyrektywy atrybutów obejmują zmianę właściwości elementów HTML. Należą do nich ngStyle, ngClass i ngModel.

Jak korzystać z ngIf

Aby użyć ngIf, będziesz potrzebować warunku, którego wartość ma wartość true, aby konkretny element HTML miał się pokazać.

1. Dodaj dwie zmienne do pliku TypeScript. W tym przykładzie istnieje zmienna noPlaylists i zmienna do przechowywania list odtwarzania. Ta zmienna zostanie oceniona jako prawda, jeśli długość tablicy list odtwarzania wynosi 0.

   noPlaylists: boolean = false;
   listy odtwarzania: dowolne = [];
   konstruktor() { }
    ngOnInit(): nieważne {
    if (this.playlists.length 0) {
    this.noPlaylists = prawda;
    }
   }
   

2. W kodzie HTML dodaj instrukcję *ngIf. Jeśli noPlaylists ma wartość true, pojawi się komunikat o błędzie zawarty w poniższym span. W przeciwnym razie nie będzie. Możesz zastosować ngIf do różnych typów Tagi HTML.

   
   
   Brak dostępnych list odtwarzania.
   
   
   
   

3. Aby dodać składnik „else” do instrukcji if, musisz dodać kod HTML dla części „else” w bloku szablonu.

   
   
   Brak dostępnych list odtwarzania.
   
   
   
   
   
   
   Znaleziono playlisty.
   
   
   
   

Jak korzystać z ngFor

Jeśli potrzebujesz powtórzyć określoną liczbę bloków na stronie, możesz użyć dyrektywy ngFor.

1. W pliku TypeScript dodaj elementy do tablicy.

   listy odtwarzania: dowolne = [
    {"name": "Rock", "numberOfSongs": 5},
    {"name": "Contemporary", "numberOfSongs": 9},
    {"name": "Popularne", "numberOfSongs": 14},
    {"name": "Acoustic", "numberOfSongs": 3},
    {"name": "Piosenki ślubne", "numberOfSongs": 25},
    {"name": "Metal", "numberOfSongs": 0},
   ];
   

2. W pliku HTML dodaj instrukcję *ngFor.

   Znaleziono playlisty.
   
   
   
   
   {{nazwa.playlisty}}
   {{playlist.numberOfSongs}} utworów
   
   
   
   
   
   
   

   Wewnątrz ngFor będziesz mógł odwoływać się do każdego obiektu w tablicy za pomocą zmiennej "playlist". „playlist.name” i „playlist.numberOfSongs” wypiszą oba atrybuty w obrębie etykietka.

Jak korzystać z ngClass

Możesz zmienić klasę stylizacji używaną przez konkretny div, w zależności od warunku.

1. Dodaj dwie klasy do pliku CSS z różnymi stylami. Możesz dodać dowolny rodzaj Stylizacja CSS chcesz, na przykład różne kolory tła.

   .piosenki {
    kolor tła: #F7F5F2;
   }
   .nopiosenki {
    kolor tła: #FFA8A8;
   }

2. W pętli for z poprzedniego kroku dodaj dyrektywę atrybutu ngClass. [ngClass]="playlista.liczbaUtworów > 0? „songs”: „noSongs” używa tego samego operator trójargumentowy, który JavaScript i inne języki.

   
   
   
   
   {{nazwa.playlisty}}
   {{playlist.numberOfSongs}} utworów
   
   
   
   
   

   Jeśli liczba utworów jest większa niż zero, do elementu div zostanie zastosowana klasa „songs”. Dzięki temu div będzie miał szary kolor tła. W przeciwnym razie, jeśli liczba utworów wynosi zero, do elementu div zostanie zastosowana klasa „noSongs”. Dzięki temu div będzie miał czerwone tło.

Jak korzystać z ngStyle

Zamiast używać ngClass, możesz użyć ngStyle, jeśli chcesz zastosować stylizację w wierszu zamiast stylizować za pośrednictwem klasy.

1. Zmień ngClass z poprzedniego kroku, aby zamiast tego użyć ngStyle.

   
   
   {{nazwa.playlisty}}
   {{playlist.numberOfSongs}} utworów
   
   
   
   

[ngStyle] = "{'background-color": playlist.numberOfSongs > 0? „#F7F5F2”: „#FFA8A8”, „kolor”: playlist.numberOfSongs > 0? 'czarny': 'ciemnoniebieski' }"

UdziałUdziałĆwierkaćUdziałE-mail

Powiązane tematy

• Programowanie
• Programowanie
• JavaScript
• HTML
• CSS