Kako uporabljati vgrajeno kotno direktivo: ngIf, ngFor, ngClass in več

HTML-ju v vašem projektu Angular lahko dodate direktive. Nekateri nadzorujejo strukturo vaše oznake, medtem ko se drugi osredotočajo na atribute.

Ta članek bo obravnaval šest najpogostejših direktiv Angular: ngFor, ngIf, ngClass, ngStyle, ngModel in ngSwitch.

Kaj so kotne direktive?

Kotne direktive vam omogočajo uporabo stavkov if in zank ter dodajanje drugega vedenja v kodo HTML Angular projekta.

direktiva	Opis
*ngČe	ngIf lahko uporabite, ko želite, da se nekateri bloki HTML prikažejo samo, če izpolnjujejo določen pogoj. Na primer, če ste imeli obrazec s pojavnim oknom, ki se prikaže, ko je uporabnik vnesel vnos za določeno polje.
*ngZa	Če potrebujete določen blok za večkratno ponovitev, lahko uporabite ngFor. Na primer, če ste imeli seznam elementov in bi morali prikazati div za vsak element.
*ngClass	To doda pogojni stil z uporabo razreda. Če stavek if izpolnjuje pogoj, bo uporabil navedeni razred.
*ngStyle	To doda pogojno in-line stiliranje. Če stavek if izpolnjuje pogoj, bo uporabil določene sloge.
*ngModel	To vam omogoča dvosmerno vezavo. To pomeni, da lahko podatke prenašate v obe smeri med datoteko HTML in TypeScript. Vrednost atributa lahko na primer posredujete iz datoteke TypeScript v datoteko HTML in obratno.
*ngSwitch	To vam omogoča, da dodate stavek switch z veliko primeri za preverjanje številnih vrednosti. Glede na primere bodo prikazani nekateri elementi HTML.

Strukturne direktive vključujejo strukturo elementov HTML. Ti vključujejo ngIf, ngFor in ngSwitch. Atributne direktive vključujejo spreminjanje lastnosti elementov HTML. Ti vključujejo ngStyle, ngClass in ngModel.

Kako uporabljati ngIf

Če želite uporabiti ngIf, boste za prikaz določenega elementa HTML potrebovali pogoj, da se oceni, da je res.

1. V datoteko TypeScript dodajte dve spremenljivki. V tem primeru obstajata spremenljivka noPlaylists in spremenljivka za shranjevanje seznamov predvajanja. Ta spremenljivka bo ocenjena na true, če je dolžina niza seznamov predvajanja 0.

   noPlaylists: boolean = false;
   seznami predvajanja: poljubno = [];
   konstruktor() { }
    ngOnInit(): void {
    če (this.playlists.length 0) {
    this.noPlaylists = true;
    }
   }
   

2. V HTML dodajte stavek *ngIf. Če je noPlaylists res, se prikaže sporočilo o napaki v spodnjem razponu. V nasprotnem primeru ne bo. ngIf lahko uporabite za različne vrste HTML oznake.

   
   
   Na voljo ni noben seznam predvajanja.
   
   
   
   

3. Če želite v stavek if dodati komponento "else", boste morali v blok predloge dodati kodo HTML za del "else".

   
   
   Na voljo ni noben seznam predvajanja.
   
   
   
   
   
   
   Najdeni seznami predvajanja.
   
   
   
   

Kako uporabljati ngFor

Če morate na strani ponoviti določeno število blokov, lahko uporabite direktivo ngFor.

1. V datoteko TypeScript dodajte elemente v matriko.

   seznami predvajanja: poljubno = [
    {"name": "Rock", "numberOfSongs": 5},
    {"name": "Contemporary", "numberOfSongs": 9},
    {"name": "Popular", "numberOfSongs": 14},
    {"name": "Acoustic", "numberOfSongs": 3},
    {"name": "Poročne pesmi", "numberOfSongs": 25},
    {"name": "Metal", "numberOfSongs": 0},
   ];
   

2. V datoteko HTML dodajte stavek *ngFor.

   Najdeni seznami predvajanja.
   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} pesmi
   
   
   
   
   
   
   

   Znotraj ngFor se boste lahko sklicevali na vsak predmet v matriki s spremenljivko "playlist". "playlist.name" in "playlist.numberOfSongs" bosta natisnila oba atributa znotraj oznaka.

Kako uporabljati ngClass

Na podlagi pogoja lahko spremenite slog oblikovanja, ki ga uporablja določen div.

1. Dodajte dva razreda v datoteko CSS z različnimi slogi. Dodate lahko katero koli Oblikovanje CSS želite, na primer različne barve ozadja.

   .songs {
    barva ozadja: #F7F5F2;
   }
   .noSongs {
    barva ozadja: #FFA8A8;
   }

2. Znotraj zanke for iz prejšnjega koraka dodajte direktivo atributa ngClass. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" uporablja isto ternarni operater, ki JavaScript in uporabo drugih jezikov.

   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} pesmi
   
   
   
   
   

   Če je število skladb večje od nič, bo razred "songs" uporabil za div. To bo divju dalo sivo barvo ozadja. V nasprotnem primeru, če je število skladb nič, bo razred "noSongs" uporabil za div. Tako bo div dobil rdečo barvo ozadja.

Kako uporabljati ngStyle

Namesto uporabe ngClass lahko uporabite ngStyle, če želite uporabiti in-line slog namesto oblikovanja prek razreda.

1. Spremenite ngClass iz prejšnjega koraka, da namesto tega uporabite ngStyle.

   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} pesmi
   
   
   
   

[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'barva': playlist.numberOfSongs > 0? 'črna': 'temno modra' }"

DelitiDelitiTweetDelitiE-naslov

Povezane teme

• Programiranje
• Programiranje
• JavaScript
• HTML
• CSS