Ako používať vstavanú uhlovú smernicu: ngIf, ngFor, ngClass a ďalšie

Direktívy môžete pridať do HTML vo svojom projekte Angular. Niektoré riadia štruktúru vášho označenia, zatiaľ čo iné sa zameriavajú na atribúty.

Tento článok sa bude zaoberať šiestimi najbežnejšími direktívami Angular: ngFor, ngIf, ngClass, ngStyle, ngModel a ngSwitch.

Čo sú to uhlové smernice?

Direktívy Angular vám umožňujú použiť príkazy if a slučky for a pridať ďalšie správanie do kódu HTML projektu Angular.

smernice	Popis
*ngIf	ngIf môžete použiť, keď chcete, aby sa určité bloky HTML zobrazovali iba vtedy, ak spĺňajú určitú podmienku. Napríklad, ak máte formulár s kontextovým oknom, ktoré sa zobrazí potom, čo používateľ zadá vstup pre určité pole.
*ngFor	ngFor môžete použiť, ak potrebujete, aby sa určitý blok opakoval mnohokrát. Napríklad, ak ste mali zoznam položiek a potrebovali ste zobraziť div pre každú položku.
*Trieda ng	To pridáva podmienený štýl pomocou triedy. Ak príkaz if spĺňa podmienku, použije zadanú triedu.
*ngStyle	To pridáva podmienený in-line styling. Ak príkaz if spĺňa podmienku, použije zadané štýly.
*ngModel	To vám umožňuje vykonávať obojsmernú väzbu. To znamená, že medzi súborom HTML a TypeScript môžete prenášať údaje oboma smermi. Môžete napríklad odovzdať hodnotu atribútu zo súboru TypeScript do súboru HTML a naopak.
*ngSwitch	To vám umožňuje pridať príkaz switch s mnohými prípadmi na kontrolu mnohých hodnôt. Na základe prípadov sa zobrazia určité prvky HTML.

Štrukturálne smernice zahŕňajú štruktúru prvkov HTML. Patria sem ngIf, ngFor a ngSwitch. Direktívy atribútov zahŕňajú zmenu vlastností prvkov HTML. Patria sem ngStyle, ngClass a ngModel.

Ako používať ngIf

Ak chcete použiť ngIf, na zobrazenie konkrétneho prvku HTML budete potrebovať podmienku, ktorá sa vyhodnotí ako pravdivá.

1. Pridajte dve premenné do súboru TypeScript. V tomto príklade existuje premenná noPlaylists a premenná na ukladanie zoznamov skladieb. Táto premenná sa vyhodnotí ako true, ak je dĺžka poľa zoznamov skladieb 0.

   noPlaylists: boolean = false;
   zoznamy skladieb: ľubovoľný = [];
   konstruktor() { }
    ngOnInit(): void {
    if (this.playlists.length 0) {
    this.noPlaylists = true;
    }
   }
   

2. Do kódu HTML pridajte príkaz *ngIf. Ak je hodnota noPlaylists pravdivá, zobrazí sa chybové hlásenie uvedené v rozsahu nižšie. Inak to nebude. ngIf môžete použiť na rôzne typy HTML tagy.

   
   
   Nie sú k dispozícii žiadne zoznamy skladieb.
   
   
   
   

3. Ak chcete pridať komponent „else“ do príkazu if, budete musieť pridať HTML kód pre časť „else“ do bloku šablóny.

   
   
   Nie sú k dispozícii žiadne zoznamy skladieb.
   
   
   
   
   
   
   Našli sa zoznamy skladieb.
   
   
   
   

Ako používať ngFor

Ak potrebujete zopakovať určitý počet blokov na stránke, môžete použiť direktívu ngFor.

1. V súbore TypeScript pridajte položky do poľa.

   zoznamy skladieb: ľubovoľný = [
    {"name": "Rock", "numberOfSongs": 5},
    {"name": "Contemporary", "numberOfSongs": 9},
    {"name": "Popular", "numberOfSongs": 14},
    {"name": "Acoustic", "numberOfSongs": 3},
    {"name": "Svadobné piesne", "numberOfSongs": 25},
    {"name": "Metal", "numberOfSongs": 0},
   ];
   

2. Do súboru HTML pridajte príkaz *ngFor.

   Našli sa zoznamy skladieb.
   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} skladieb
   
   
   
   
   
   
   

   Vo vnútri ngFor budete môcť odkazovať na každý objekt v poli pomocou premennej „playlist“. "playlist.name" a "playlist.numberOfSongs" vytlačí oba atribúty v rámci tag.

Ako používať ngClass

Môžete zmeniť triedu štýlu, ktorú používa konkrétny div, na základe podmienky.

1. Pridajte do súboru CSS dve triedy s rôznymi štýlmi. Môžete pridať akýkoľvek druh CSS štýl chcete, napríklad rôzne farby pozadia.

   .piesne {
    farba pozadia: #F7F5F2;
   }
   .noSongs {
    farba pozadia: #FFA8A8;
   }

2. V rámci cyklu for z predchádzajúceho kroku pridajte smernicu atribútu ngClass. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'“ používa to isté ternárny operátor JavaScript a iné jazyky používajú.

   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} skladieb
   
   
   
   
   

   Ak je počet skladieb väčší ako nula, na div sa použije trieda „skladby“. To dá divu sivú farbu pozadia. V opačnom prípade, ak je počet skladieb nula, použije triedu „noSongs“ na div. To dá divu červenú farbu pozadia.

Ako používať ngStyle

Namiesto použitia ngClass môžete použiť ngStyle, ak chcete použiť riadkový štýl namiesto štýlu prostredníctvom triedy.

1. Zmeňte triedu ngClass z predchádzajúceho kroku tak, aby namiesto nej používala štýl ngStyle.

   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} skladieb
   
   
   
   

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

zdieľamzdieľamTweetujtezdieľamEmail

Súvisiace témy

• Programovanie
• Programovanie
• JavaScript
• HTML
• CSS