Sådan bruges det indbyggede vinkeldirektiv: ngIf, ngFor, ngClass og mere

Du kan tilføje direktiver til HTML i dit Angular-projekt. Nogle styrer strukturen af ​​din markering, mens andre fokuserer på attributter.

Denne artikel vil gennemgå de seks mest almindelige Angular-direktiver: ngFor, ngIf, ngClass, ngStyle, ngModel og ngSwitch.

Hvad er vinkeldirektiver?

Angular-direktiver giver dig mulighed for at bruge if-sætninger og for loops, og tilføje anden adfærd til HTML-koden for et Angular-projekt.

direktiv	Beskrivelse
*ngHvis	Du kan bruge ngIf, når du ønsker, at visse HTML-blokke kun skal vises, hvis de opfylder en bestemt betingelse. For eksempel hvis du havde en formular med en pop-up, der vises efter en bruger har indtastet input til et bestemt felt.
*ngFor	Du kan bruge ngFor, hvis du skal gentage en bestemt blok mange gange. For eksempel, hvis du havde en liste over elementer og skulle vise en div for hvert element.
*ngKlasse	Dette tilføjer betinget styling ved hjælp af en klasse. Hvis en hvis-sætning opfylder betingelsen, vil den anvende den angivne klasse.
*ngStyle	Dette tilføjer betinget in-line styling. Hvis en if-sætning opfylder betingelsen, vil den anvende de angivne stilarter.
*ngModel	Dette giver dig mulighed for at lave to-vejs binding. Dette betyder, at du kan overføre data i begge retninger mellem HTML- og TypeScript-filen. For eksempel kan du overføre en attributs værdi fra TypeScript-filen til HTML-filen og omvendt.
*ngSwitch	Dette giver dig mulighed for at tilføje en switch-sætning med mange sager for at kontrollere mange værdier. Baseret på sagerne vil visse HTML-elementer blive vist.

Strukturelle direktiver involverer strukturen af ​​HTML-elementerne. Disse inkluderer ngIf, ngFor og ngSwitch. Attributdirektiver involverer ændring af egenskaberne for HTML-elementerne. Disse omfatter ngStyle, ngClass og ngModel.

Sådan bruges ngIf

For at bruge ngIf skal du bruge en betingelse, der skal evalueres til sand, for at et bestemt HTML-element kan vises.

1. Tilføj to variabler til din TypeScript-fil. I dette eksempel er der en noPlaylists-variabel og en variabel til at gemme afspilningslisterne. Denne variabel vil evalueres til sand, hvis længden af ​​afspilningslistearrayet er 0.

   noPlaylists: boolean = falsk;
   afspilningslister: enhver = [];
   konstruktør() { }
    ngOnInit(): void {
    if (this.playlists.length 0) {
    this.noPlaylists = sand;
    }
   }
   

2. Tilføj *ngIf-sætningen i HTML-koden. Hvis noPlaylists er sandt, vises fejlmeddelelsen i intervallet nedenfor. Ellers vil det ikke. Du kan anvende ngIf på forskellige typer af HTML tags.

   
   
   Der er ingen tilgængelige playlister.
   
   
   
   

3. For at tilføje en "else"-komponent til if-sætningen, skal du tilføje HTML-koden for "else"-delen i en skabelonblok.

   
   
   Der er ingen tilgængelige playlister.
   
   
   
   
   
   
   Afspilningslister fundet.
   
   
   
   

Sådan bruges ngFor

Hvis du skal gentage et bestemt antal blokke på en side, kan du bruge ngFor-direktivet.

1. Tilføj elementer til arrayet i TypeScript-filen.

   afspilningslister: enhver = [
    {"name": "Rock", "numberOfSongs": 5},
    {"name": "Contemporary", "numberOfSongs": 9},
    {"name": "Popular", "numberOfSongs": 14},
    {"name": "Akustisk", "numberOfSongs": 3},
    {"name": "Bryllupssange", "numberOfSongs": 25},
    {"name": "Metal", "numberOfSongs": 0},
   ];
   

2. Tilføj *ngFor-sætningen i HTML-filen.

   Afspilningslister fundet.
   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} sange
   
   
   
   
   
   
   

   Inde i ngFor vil du være i stand til at referere til hvert objekt i arrayet ved hjælp af "playlist"-variablen. "playlist.name" og "playlist.numberOfSongs" vil udskrive begge attributter inden for tag.

Sådan bruges ngClass

Du kan ændre den stylingklasse, som en bestemt div bruger, baseret på en betingelse.

1. Tilføj to klasser til CSS-filen med forskellige stilarter. Du kan tilføje enhver form for CSS styling du ønsker, såsom forskellige baggrundsfarver.

   .songs {
    baggrundsfarve: #F7F5F2;
   }
   .noSongs {
    baggrundsfarve: #FFA8A8;
   }

2. Inden for for-løkken fra det forrige trin skal du tilføje ngClass-attributdirektivet. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" bruger det samme ternær operatør, der JavaScript og andre sprogbrug.

   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} sange
   
   
   
   
   

   Hvis antallet af sange er større end nul, vil det anvende "sange"-klassen på div. Dette vil give div en grå baggrundsfarve. Ellers, hvis antallet af sange er nul, vil det anvende "noSongs"-klassen på div. Dette vil give div en rød baggrundsfarve.

Sådan bruger du ngStyle

I stedet for at bruge ngClass kan du bruge ngStyle, hvis du vil anvende in-line styling i stedet for styling via en klasse.

1. Skift ngClass fra det forrige trin for at bruge ngStyle i stedet.

   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} sange
   
   
   
   

[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'color': playlist.numberOfSongs > 0? 'black': 'darkblue' }"

DelDelTweetDelE-mail

Relaterede emner

• Programmering
• Programmering
• JavaScript
• HTML
• CSS