Slik bruker du innebygd vinkeldirektiv: ngIf, ngFor, ngClass og mer

Du kan legge til direktiver i HTML-en i Angular-prosjektet ditt. Noen kontrollerer strukturen til markeringen din, mens andre fokuserer på attributter.

Denne artikkelen vil gå gjennom de seks vanligste Angular-direktivene: ngFor, ngIf, ngClass, ngStyle, ngModel og ngSwitch.

Hva er vinkeldirektiver?

Angular-direktiver lar deg bruke if-setninger og for loops, og legge til annen atferd til HTML-koden til et Angular-prosjekt.

direktiv	Beskrivelse
*ngHvis	Du kan bruke ngIf når du vil at visse HTML-blokker bare skal vises hvis de oppfyller en bestemt betingelse. For eksempel hvis du hadde et skjema med en pop-up som vises etter at en bruker har lagt inn inndata for et bestemt felt.
*ngFor	Du kan bruke ngFor hvis du trenger en bestemt blokk å gjenta mange ganger. For eksempel, hvis du hadde en liste over elementer og trengte å vise en div for hvert element.
*ngKlasse	Dette legger til betinget styling ved hjelp av en klasse. Hvis en hvis-setning oppfyller betingelsen, vil den gjelde den angitte klassen.
*ngStil	Dette legger til betinget in-line styling. Hvis en hvis-setning oppfyller betingelsen, vil den bruke stilene som er spesifisert.
*ngModell	Dette lar deg gjøre toveis binding. Dette betyr at du kan sende data i begge retninger mellom HTML- og TypeScript-filen. Du kan for eksempel overføre et attributts verdi fra TypeScript-filen til HTML-filen, og omvendt.
*ngSwitch	Dette lar deg legge til en switch-setning med mange tilfeller for å sjekke mange verdier. Basert på tilfellene vil visse HTML-elementer vises.

Strukturelle direktiver involverer strukturen til HTML-elementene. Disse inkluderer ngIf, ngFor og ngSwitch. Attributtdirektiver innebærer å endre egenskapene til HTML-elementene. Disse inkluderer ngStyle, ngClass og ngModel.

Hvordan bruke ngIf

For å bruke ngIf, trenger du en betingelse for å evaluere til sann for at et bestemt HTML-element skal vises.

1. Legg til to variabler til TypeScript-filen. I dette eksemplet er det en noPlaylists-variabel og en variabel for å lagre spillelistene. Denne variabelen vil evalueres til sann hvis lengden på spillelistearrayen er 0.

   noPlaylists: boolean = falsk;
   spillelister: any = [];
   konstruktør() { }
    ngOnInit(): void {
    if (this.playlists.length 0) {
    this.noPlaylists = sant;
    }
   }
   

2. I HTML-en legger du til *ngIf-setningen. Hvis noPlaylists er sann, vil feilmeldingen i spannet nedenfor vises. Ellers vil det ikke gjøre det. Du kan bruke ngIf på forskjellige typer HTML-tagger.

   
   
   Det er ingen spillelister tilgjengelig.
   
   
   
   

3. For å legge til en "else"-komponent til if-setningen, må du legge til HTML-koden for "else"-delen i en malblokk.

   
   
   Det er ingen spillelister tilgjengelig.
   
   
   
   
   
   
   Spillelister funnet.
   
   
   
   

Hvordan bruke ngFor

Hvis du trenger å gjenta et visst antall blokker på en side, kan du bruke ngFor-direktivet.

1. I TypeScript-filen legger du til elementer i matrisen.

   spillelister: hvilken som helst = [
    {"name": "Rock", "numberOfSongs": 5},
    {"name": "Contemporary", "numberOfSongs": 9},
    {"name": "Popular", "numberOfSongs": 14},
    {"name": "Akustisk", "numberOfSongs": 3},
    {"name": "Bryllupssanger", "numberOfSongs": 25},
    {"name": "Metal", "numberOfSongs": 0},
   ];
   

2. I HTML-filen legger du til *ngFor-setningen.

   Spillelister funnet.
   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} sanger
   
   
   
   
   
   
   

   Inne i ngFor vil du kunne referere til hvert objekt i matrisen ved å bruke "spilleliste"-variabelen. "playlist.name" og "playlist.numberOfSongs" vil skrive ut begge attributtene i stikkord.

Slik bruker du ngClass

Du kan endre stilklassen som en bestemt div bruker, basert på en betingelse.

1. Legg til to klasser i CSS-filen med forskjellige stiler. Du kan legge til alle slags CSS-styling du ønsker, for eksempel forskjellige bakgrunnsfarger.

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

2. Innenfor for-løkken fra forrige trinn, legg til ngClass-attributtdirektivet. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" bruker det samme ternær operatør som JavaScript og andre språkbruk.

   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} sanger
   
   
   
   
   

   Hvis antall sanger er større enn null, vil den bruke "sanger"-klassen på div. Dette vil gi div en grå bakgrunnsfarge. Ellers, hvis antall sanger er null, vil den bruke "noSongs"-klassen på div. Dette vil gi div en rød bakgrunnsfarge.

Slik bruker du ngStyle

I stedet for å bruke ngClass, kan du bruke ngStyle hvis du vil bruke in-line styling i stedet for styling via en klasse.

1. Endre ngClass fra forrige trinn for å bruke ngStyle i stedet.

   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} sanger
   
   
   
   

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

DeleDelekvitringDeleE-post

Relaterte temaer

• Programmering
• Programmering
• JavaScript
• HTML
• CSS