Hoe de ingebouwde hoekrichtlijn te gebruiken: ngIf, ngFor, ngClass en meer

U kunt richtlijnen toevoegen aan de HTML in uw Angular-project. Sommige bepalen de structuur van uw markeringen, terwijl andere zich concentreren op attributen.

Dit artikel behandelt de zes meest voorkomende Angular-richtlijnen: ngFor, ngIf, ngClass, ngStyle, ngModel en ngSwitch.

Wat zijn hoekrichtlijnen?

Met Angular-richtlijnen kunt u if-statements en for-lussen gebruiken en ander gedrag toevoegen aan de HTML-code van een Angular-project.

Richtlijn	Beschrijving
*ngIf	U kunt ngIf gebruiken wanneer u wilt dat bepaalde HTML-blokken alleen worden weergegeven als ze aan een bepaalde voorwaarde voldoen. Als u bijvoorbeeld een formulier had met een pop-up die wordt weergegeven nadat een gebruiker invoer voor een bepaald veld heeft ingevoerd.
*ngFor	U kunt ngFor gebruiken als u een bepaald blok vele malen moet herhalen. Als u bijvoorbeeld een lijst met items had en voor elk item een ​​div moest weergeven.
*ngClass	Dit voegt voorwaardelijke styling toe met behulp van een klasse. Als een if-statement aan de voorwaarde voldoet, wordt de opgegeven klasse toegepast.
*ngStyle	Dit voegt voorwaardelijke in-line styling toe. Als een if-statement aan de voorwaarde voldoet, worden de opgegeven stijlen toegepast.
*ngModel	Hiermee kunt u in twee richtingen binden. Dit betekent dat u gegevens in beide richtingen kunt doorgeven tussen het HTML- en TypeScript-bestand. U kunt bijvoorbeeld de waarde van een kenmerk van het TypeScript-bestand doorgeven aan het HTML-bestand en omgekeerd.
*ngSwitch	Hiermee kunt u een switch-statement met veel gevallen toevoegen om veel waarden te controleren. Op basis van de gevallen zullen bepaalde HTML-elementen worden weergegeven.

Structurele richtlijnen hebben betrekking op de structuur van de HTML-elementen. Deze omvatten ngIf, ngFor en ngSwitch. Attribuutrichtlijnen hebben betrekking op het wijzigen van de eigenschappen van de HTML-elementen. Deze omvatten ngStyle, ngClass en ngModel.

Hoe ngIf. te gebruiken

Om ngIf te gebruiken, hebt u een voorwaarde nodig om te evalueren naar waar voor een bepaald HTML-element om te laten zien.

1. Voeg twee variabelen toe aan uw TypeScript-bestand. In dit voorbeeld is er een variabele noPlaylists en een variabele om de playlists op te slaan. Deze variabele evalueert waar als de lengte van de playlists-array 0 is.

   noPlaylists: boolean = false;
   afspeellijsten: elke = [];
   constructeur() { }
    ngOnInit(): ongeldig {
    if (this.playlists.length 0) {
    this.noPlaylists = waar;
    }
   }
   

2. Voeg in de HTML de *ngIf-instructie toe. Als noPlaylists waar is, verschijnt de foutmelding in de onderstaande reeks. Anders zal het niet. U kunt ngIf toepassen op verschillende soorten HTML-tags.

   
   
   Er zijn geen afspeellijsten beschikbaar.
   
   
   
   

3. Om een ​​"else"-component aan de if-statement toe te voegen, moet u de HTML-code voor het "else"-gedeelte in een sjabloonblok toevoegen.

   
   
   Er zijn geen afspeellijsten beschikbaar.
   
   
   
   
   
   
   Afspeellijsten gevonden.
   
   
   
   

Hoe ngFor te gebruiken

Als u een bepaald aantal blokken op een pagina moet herhalen, kunt u de ngFor-richtlijn gebruiken.

1. Voeg in het TypeScript-bestand items toe aan de array.

   afspeellijsten: elke = [
    {"name": "Rock", "numberOfSongs": 5},
    {"name": "hedendaagse", "numberOfSongs": 9},
    {"name": "Populair", "numberOfSongs": 14},
    {"name": "Akoestisch", "numberOfSongs": 3},
    {"name": "Wedding Songs", "numberOfSongs": 25},
    {"name": "Metal", "numberOfSongs": 0},
   ];
   

2. Voeg in het HTML-bestand de *ngFor-instructie toe.

   Afspeellijsten gevonden.
   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} nummers
   
   
   
   
   
   
   

   Binnen de ngFor kunt u naar elk object in de array verwijzen met behulp van de variabele "playlist". "playlist.name" en "playlist.numberOfSongs" zullen beide attributen afdrukken binnen de label.

Hoe ngClass te gebruiken

U kunt de stijlklasse die een bepaalde div gebruikt, wijzigen op basis van een voorwaarde.

1. Voeg twee klassen toe aan het CSS-bestand met verschillende stijlen. U kunt elke vorm van toevoegen CSS-stijl u wilt, zoals verschillende achtergrondkleuren.

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

2. Voeg binnen de for-lus van de vorige stap de attribuutrichtlijn ngClass toe. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" gebruikt hetzelfde ternaire operator die JavaScript en andere talen gebruiken.

   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} nummers
   
   
   
   
   

   Als het aantal nummers groter is dan nul, wordt de klasse "nummers" toegepast op de div. Dit geeft de div een grijze achtergrondkleur. Anders, als het aantal nummers nul is, wordt de klasse "noSongs" toegepast op de div. Dit geeft de div een rode achtergrondkleur.

Hoe ngStyle te gebruiken

In plaats van ngClass te gebruiken, kun je ngStyle gebruiken als je in-line styling wilt toepassen in plaats van styling via een class.

1. Wijzig de ngClass van de vorige stap om in plaats daarvan ngStyle te gebruiken.

   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} nummers
   
   
   
   

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

DelenDelenTweetenDelenE-mail

Gerelateerde onderwerpen

• Programmeren
• Programmeren
• JavaScript
• HTML
• CSS