Kaip naudoti įmontuotą kampo direktyvą: „ngIf“, „ngFor“, „ngClass“ ir kt.

Galite pridėti direktyvų į HTML savo kampiniame projekte. Kai kurie kontroliuoja jūsų žymėjimo struktūrą, o kiti sutelkia dėmesį į atributus.

Šiame straipsnyje bus nagrinėjamos šešios dažniausiai pasitaikančios kampinės direktyvos: ngFor, ngIf, ngClass, ngStyle, ngModel ir ngSwitch.

Kas yra kampinės direktyvos?

Kampinės direktyvos leidžia naudoti if teiginius ir for ciklus bei pridėti kitokios elgsenos į Angular projekto HTML kodą.

direktyva	apibūdinimas
*ngJei	Galite naudoti ngIf, kai norite, kad tam tikri HTML blokai būtų rodomi tik tada, kai jie atitinka tam tikrą sąlygą. Pavyzdžiui, jei turėjote formą su iššokančiu langu, kuris rodomas vartotojui įvedus tam tikro lauko įvestį.
*ngDėl	Galite naudoti „ngFor“, jei jums reikia, kad tam tikras blokas būtų kartojamas daug kartų. Pavyzdžiui, jei turėjote elementų sąrašą ir kiekvienam elementui reikėjo rodyti div.
*ngClass	Tai prideda sąlyginį stilių naudojant klasę. Jei teiginys „if“ atitinka sąlygą, jis taikys nurodytą klasę.
*ngStilius	Tai prideda sąlyginį in-line stilių. Jei teiginys „if“ atitinka sąlygą, jis taikys nurodytus stilius.
*ngModelis	Tai leidžia atlikti dvipusį įrišimą. Tai reiškia, kad galite perduoti duomenis abiem kryptimis tarp HTML ir TypeScript failo. Pavyzdžiui, galite perduoti atributo reikšmę iš TypeScript failo į HTML failą ir atvirkščiai.
*ngSwitch	Tai leidžia pridėti jungiklio teiginį su daugybe atvejų, kad patikrintumėte daug reikšmių. Atsižvelgiant į atvejus, bus rodomi tam tikri HTML elementai.

Struktūrinės direktyvos apima HTML elementų struktūrą. Tai apima ngIf, ngFor ir ngSwitch. Atributų direktyvos apima HTML elementų savybių keitimą. Tai apima ngStyle, ngClass ir ngModel.

Kaip naudoti ngIf

Jei norite naudoti „ngIf“, jums reikės sąlygos, kurią reikia įvertinti kaip „true“, kad būtų rodomas konkretus HTML elementas.

1. Pridėkite du kintamuosius prie „TypeScript“ failo. Šiame pavyzdyje yra kintamasis noPlaylists ir kintamasis grojaraščiams saugoti. Šis kintamasis bus įvertintas kaip tikras, jei grojaraščių masyvo ilgis yra 0.

   noPlaylists: loginis = false;
   grojaraščiai: bet kuris = [];
   konstruktorius () { }
    ngOnInit(): void {
    if (this.playlists.length 0) {
    this.noPlaylists = tiesa;
    }
   }
   

2. HTML pridėkite teiginį *ngIf. Jei noPlaylists tiesa, pasirodys klaidos pranešimas, esantis toliau pateiktame intervale. Kitaip nebus. Galite taikyti ngIf įvairiems tipams HTML žymės.

   
   
   Nėra pasiekiamų grojaraščių.
   
   
   
   

3. Norėdami pridėti komponentą „else“ prie „if“ teiginio, šablono bloke turėsite pridėti dalies „else“ HTML kodą.

   
   
   Nėra pasiekiamų grojaraščių.
   
   
   
   
   
   
   Rasti grojaraščiai.
   
   
   
   

Kaip naudoti ngFor

Jei puslapyje reikia pakartoti tam tikrą blokų skaičių, galite naudoti direktyvą ngFor.

1. „TypeScript“ faile pridėkite elementus prie masyvo.

   grojaraščiai: bet kuris = [
    {"name": "Rokas", "numberOfSongs": 5},
    {"name": "Šiuolaikinis", "numberOfSongs": 9},
    {"name": "Populiarus", "numberOfSongs": 14},
    {"name": "Akustinis", "numberOfSongs": 3},
    {"name": "Vestuvių dainos", "numberOfSongs": 25},
    {"name": "Metal", "numberOfSongs": 0},
   ];
   

2. HTML faile pridėkite teiginį *ngFor.

   Rasti grojaraščiai.
   
   
   
   
   {{grojaraštis.vardas}}
   {{playlist.numberOfSongs}} dainų
   
   
   
   
   
   
   

   „ngFor“ viduje galėsite nurodyti kiekvieną masyvo objektą naudodami „grojaraščio“ kintamąjį. „playlist.name“ ir „playlist.numberOfSongs“ išspausdins abu atributus žyma.

Kaip naudotis ngClass

Galite pakeisti stiliaus klasę, kurią naudoja konkretus div, atsižvelgdami į sąlygą.

1. Į CSS failą pridėkite dvi klases su skirtingais stiliais. Galite pridėti bet kokios rūšies CSS stilius norite, pvz., skirtingų fono spalvų.

   .songs {
    fono spalva: #F7F5F2;
   }
   .no Songs {
    fono spalva: #FFA8A8;
   }

2. Ankstesnio veiksmo cikle pridėkite ngClass atributo direktyvą. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" naudoja tą patį trinarinis operatorius, kuris yra „JavaScript“. ir kitomis kalbomis.

   
   
   
   
   {{grojaraštis.vardas}}
   {{playlist.numberOfSongs}} dainų
   
   
   
   
   

   Jei dainų skaičius yra didesnis nei nulis, tai skirs "dainų" klasę. Tai suteiks „div“ pilką fono spalvą. Priešingu atveju, jei dainų skaičius yra lygus nuliui, tai skirs "noSongs" klasę. Tai suteiks „div“ raudoną fono spalvą.

Kaip naudotis „ngStyle“.

Užuot naudoję ngClass, galite naudoti ngStyle, jei norite taikyti tiesioginį stilių, o ne stilių per klasę.

1. Pakeiskite ngClass iš ankstesnio veiksmo ir vietoj to naudokite ngStyle.

   
   
   {{grojaraštis.vardas}}
   {{playlist.numberOfSongs}} dainų
   
   
   
   

[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'spalva': playlist.numberOfSongs > 0? 'juoda': 'tamsiai mėlyna' }"

DalintisDalintisTviteryjeDalintisEl. paštas

Susijusios temos

• Programavimas
• Programavimas
• JavaScript
• HTML
• CSS