Kā izmantot iebūvēto leņķisko direktīvu: ngIf, ngFor, ngClass un citi

Varat pievienot direktīvas HTML savā Angular projektā. Daži kontrolē jūsu marķējuma struktūru, bet citi koncentrējas uz atribūtiem.

Šajā rakstā tiks apskatītas sešas visizplatītākās Angular direktīvas: ngFor, ngIf, ngClass, ngStyle, ngModel un ngSwitch.

Kas ir leņķiskās direktīvas?

Angular direktīvas ļauj izmantot if paziņojumus un for cilpas, kā arī pievienot citu darbību Angular projekta HTML kodam.

direktīva	Apraksts
*ngJa	Varat izmantot ngIf, ja vēlaties, lai daži HTML bloki tiktu rādīti tikai tad, ja tie atbilst noteiktam nosacījumam. Piemēram, ja jums bija veidlapa ar uznirstošo logu, kas tiek parādīts pēc tam, kad lietotājs ir ievadījis ievadi noteiktā laukā.
*ngPar	Varat izmantot ngFor, ja jums ir nepieciešams noteikts bloks, kas jāatkārto vairākas reizes. Piemēram, ja jums bija vienumu saraksts un katram vienumam bija jāparāda div.
*ngClass	Tas pievieno nosacītu stilu, izmantojot klasi. Ja paziņojums ja atbilst nosacījumam, tas piemēros norādīto klasi.
*ngStils	Tas pievieno nosacītu in-line stilu. Ja paziņojums if atbilst nosacījumam, tas izmantos norādītos stilus.
*ngModelis	Tas ļauj veikt divvirzienu iesiešanu. Tas nozīmē, ka varat pārsūtīt datus abos virzienos starp HTML un TypeScript failu. Piemēram, jūs varat nodot atribūta vērtību no TypeScript faila uz HTML failu un otrādi.
*ngSlēdzis	Tas ļauj pievienot slēdža paziņojumu ar daudziem gadījumiem, lai pārbaudītu daudzas vērtības. Pamatojoties uz gadījumiem, tiks rādīti noteikti HTML elementi.

Strukturālās direktīvas ietver HTML elementu struktūru. Tie ietver ngIf, ngFor un ngSwitch. Atribūtu direktīvas ietver HTML elementu rekvizītu maiņu. Tie ietver ngStyle, ngClass un ngModel.

Kā lietot ngIf

Lai izmantotu ngIf, jums būs nepieciešams nosacījums, kas jānovērtē uz patiesu, lai rādītu konkrētu HTML elementu.

1. Pievienojiet savam TypeScript failam divus mainīgos. Šajā piemērā ir mainīgais noPlaylists un mainīgais atskaņošanas sarakstu glabāšanai. Šis mainīgais tiks novērtēts kā patiess, ja atskaņošanas sarakstu masīva garums ir 0.

   noPlaylists: Būla = false;
   atskaņošanas saraksti: jebkurš = [];
   konstruktors() { }
    ngOnInit(): void {
    if (this.playlists.length 0) {
    this.noPlaylists = true;
    }
   }
   

2. HTML kodā pievienojiet *ngIf priekšrakstu. Ja noPlaylists ir patiess, tiks parādīts kļūdas ziņojums, kas ietverts tālāk esošajā diapazonā. Citādi tā nebūs. Jūs varat piemērot ngIf dažādiem veidiem HTML tagi.

   
   
   Nav pieejams neviens atskaņošanas saraksts.
   
   
   
   

3. Lai if-paziņojumam pievienotu komponentu “else”, veidnes blokā būs jāpievieno daļas “else” HTML kods.

   
   
   Nav pieejams neviens atskaņošanas saraksts.
   
   
   
   
   
   
   Atskaņošanas saraksti atrasti.
   
   
   
   

Kā lietot ngFor

Ja lapā ir jāatkārto noteikts bloku skaits, varat izmantot direktīvu ngFor.

1. TypeScript failā pievienojiet vienumus masīvam.

   atskaņošanas saraksti: jebkurš = [
    {"name": "Rock", "numberOfSongs": 5},
    {"name": "Mūsdienu", "numberOfSongs": 9},
    {"name": "Populārs", "numberOfSongs": 14},
    {"name": "Akustisks", "numberOfSongs": 3},
    {"name": "Kāzu dziesmas", "numberOfSongs": 25},
    {"name": "Metal", "numberOfSongs": 0},
   ];
   

2. HTML failā pievienojiet *ngFor priekšrakstu.

   Atskaņošanas saraksti atrasti.
   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} dziesmas
   
   
   
   
   
   
   

   Iekšā ngFor jūs varēsiet atsaukties uz katru objektu masīvā, izmantojot mainīgo "playlist". "playlist.name" un "playlist.numberOfSongs" drukā abus atribūtus tagu.

Kā lietot ngClass

Varat mainīt stila klasi, ko izmanto konkrētais div, pamatojoties uz nosacījumu.

1. Pievienojiet CSS failam divas klases ar dažādiem stiliem. Jūs varat pievienot jebkura veida CSS stils vēlaties, piemēram, dažādas fona krāsas.

   .dziesmas {
    fona krāsa: #F7F5F2;
   }
   .noSongs {
    fona krāsa: #FFA8A8;
   }

2. Iepriekšējās darbības cilpas ietvaros pievienojiet ngClass atribūta direktīvu. [ngClass]="playlist.numberOfSongs > 0? 'songs': 'noSongs'" izmanto to pašu trīskāršs operators, kas JavaScript un citās valodās.

   
   
   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} dziesmas
   
   
   
   
   

   Ja dziesmu skaits ir lielāks par nulli, dalījumam div tiks piemērota klase "dziesmas". Tas piešķirs div pelēku fona krāsu. Pretējā gadījumā, ja dziesmu skaits ir nulle, tas piemēros "noSongs" klasi div. Tas piešķirs div sarkanu fona krāsu.

Kā lietot ngStyle

Tā vietā, lai izmantotu ngClass, varat izmantot ngStyle, ja vēlaties izmantot in-line stilu, nevis stilu, izmantojot klasi.

1. Mainiet ngClass no iepriekšējās darbības, lai tā vietā izmantotu ngStyle.

   
   
   {{playlist.name}}
   {{playlist.numberOfSongs}} dziesmas
   
   
   
   

[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'krāsa': playlist.numberOfSongs > 0? 'melns': 'tumši zils' }"

DalītiesDalītiesČivinātDalītiesE-pasts

Saistītās tēmas

• Programmēšana
• Programmēšana
• JavaScript
• HTML
• CSS