Cum să utilizați directiva unghiulară încorporată: ngIf, ngFor, ngClass și altele

Puteți adăuga directive la HTML în proiectul dvs. Angular. Unii controlează structura marcajului, în timp ce alții se concentrează pe atribute.

Acest articol va trece prin cele mai comune șase directive Angular: ngFor, ngIf, ngClass, ngStyle, ngModel și ngSwitch.

Ce sunt directivele unghiulare?

Directivele Angular vă permit să utilizați instrucțiuni if ​​și bucle for și să adăugați alt comportament la codul HTML al unui proiect Angular.

Directivă	Descriere
*ngIf	Puteți utiliza ngIf când doriți ca anumite blocuri HTML să fie afișate numai dacă îndeplinesc o anumită condiție. De exemplu, dacă ați avut un formular cu o fereastră pop-up care se afișează după ce un utilizator a introdus introducerea pentru un anumit câmp.
*ngFor	Puteți folosi ngFor dacă aveți nevoie de un anumit bloc să se repete de mai multe ori. De exemplu, dacă aveați o listă de articole și trebuia să afișați un div pentru fiecare articol.
*ngClass	Aceasta adaugă stil condiționat folosind o clasă. Dacă o declarație if îndeplinește condiția, se va aplica clasa specificată.
*ngStyle	Acest lucru adaugă un stil condiționat în linie. Dacă o instrucțiune if îndeplinește condiția, va aplica stilurile specificate.
*ngModel	Acest lucru vă permite să faceți legături în două sensuri. Aceasta înseamnă că puteți trece date în ambele direcții între fișierul HTML și TypeScript. De exemplu, puteți trece valoarea unui atribut din fișierul TypeScript în fișierul HTML și invers.
*ngSwitch	Acest lucru vă permite să adăugați o instrucțiune switch cu multe cazuri pentru a verifica multe valori. Pe baza cazurilor, se vor afișa anumite elemente HTML.

Directivele structurale implică structura elementelor HTML. Acestea includ ngIf, ngFor și ngSwitch. Directivele de atribut implică modificarea proprietăților elementelor HTML. Acestea includ ngStyle, ngClass și ngModel.

Cum se utilizează ngIf

Pentru a utiliza ngIf, veți avea nevoie de o condiție de evaluat la adevărat pentru ca un anumit element HTML să fie afișat.

1. Adăugați două variabile în fișierul TypeScript. În acest exemplu, există o variabilă noPlaylists și o variabilă pentru a stoca listele de redare. Această variabilă se va evalua adevărat dacă lungimea matricei listelor de redare este 0.

   noPlaylists: boolean = false;
   liste de redare: orice = [];
   constructor() { }
    ngOnInit(): void {
    dacă (this.playlists.length 0) {
    this.noPlaylists = adevărat;
    }
   }
   

2. În HTML, adăugați instrucțiunea *ngIf. Dacă noPlaylists este adevărat, va apărea mesajul de eroare conținut în intervalul de mai jos. Altfel, nu va fi. Puteți aplica ngIf la diferite tipuri de Etichete HTML.

   
   
   Nu există liste de redare disponibile.
   
   
   
   

3. Pentru a adăuga o componentă „else” la instrucțiunea if, va trebui să adăugați codul HTML pentru partea „else” într-un bloc șablon.

   
   
   Nu există liste de redare disponibile.
   
   
   
   
   
   
   S-au găsit liste de redare.
   
   
   
   

Cum se utilizează ngFor

Dacă trebuie să repetați un anumit număr de blocuri pe o pagină, puteți utiliza directiva ngFor.

1. În fișierul TypeScript, adăugați elemente la matrice.

   liste de redare: orice = [
    {"name": "Rock", "numberOfSongs": 5},
    {"name": "Contemporan", "numberOfSongs": 9},
    {"name": "Popular", "numberOfSongs": 14},
    {"name": "Acoustic", "numberOfSongs": 3},
    {"name": "Cântece de nuntă", "numberOfSongs": 25},
    {"name": "Metal", "numberOfSongs": 0},
   ];
   

2. În fișierul HTML, adăugați instrucțiunea *ngFor.

   S-au găsit liste de redare.
   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} cântece
   
   
   
   
   
   
   

   În interiorul ngFor, veți putea face referire la fiecare obiect din matrice folosind variabila „playlist”. „playlist.name” și „playlist.numberOfSongs” vor imprima ambele atribute în cadrul etichetă.

Cum se utilizează ngClass

Puteți schimba clasa de stil pe care o folosește un anumit div, în funcție de o condiție.

1. Adăugați două clase în fișierul CSS cu stiluri diferite. Puteți adăuga orice fel de Stilul CSS doriti, cum ar fi culori diferite de fundal.

   .melodii {
    culoare de fundal: #F7F5F2;
   }
   .noSongs {
    culoare de fundal: #FFA8A8;
   }

2. În bucla for de la pasul anterior, adăugați directiva de atribut ngClass. [ngClass]="playlist.numberOfSongs > 0? „songs”: „noSongs”” folosește același lucru operator ternar care JavaScript și alte limbi utilizate.

   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} cântece
   
   
   
   
   

   Dacă numărul de melodii este mai mare decât zero, se va aplica clasa „melodii” la div. Acest lucru va da div-ului o culoare de fundal gri. În caz contrar, dacă numărul de melodii este zero, se va aplica clasa „noSongs” la div. Acest lucru va da div-ului o culoare roșie de fundal.

Cum se utilizează ngStyle

În loc să utilizați ngClass, puteți utiliza ngStyle dacă doriți să aplicați stilul în linie în loc de stilul printr-o clasă.

1. Schimbați ngClass de la pasul anterior pentru a utiliza în schimb ngStyle.

   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} cântece
   
   
   
   

[ngStyle]="{'background-color': playlist.numberOfSongs > 0? „#F7F5F2”: „#FFA8A8”, „culoare”: playlist.numberOfSongs > 0? „negru”: „albastru închis” }”

AcțiuneAcțiuneTweetAcțiuneE-mail

Subiecte asemănătoare

• Programare
• Programare
• JavaScript
• HTML
• CSS