Az ngFor Angular irányelv használata

Az Angular direktívákat használ bizonyos HTML-elemek dinamikus megjelenítéséhez a webhelyen. Az egyik használható szerkezeti direktíva az ngFor.

Az ngFor direktíva lehetővé teszi, hogy ugyanazt a blokkot meghatározott számú alkalommal megismételje, vagy objektumok tömbjén keresztül görgessen a részletek megjelenítéséhez. Ez egy hatékony eszköz, amellyel akár objektumokat is renderelhet más objektumokon belül.

Ezenkívül számos olyan funkcióval rendelkezik, amelyek bizonyos helyzetekben hasznosak lehetnek. Ez magában foglalja az első és az utolsó elem megkeresését vagy bizonyos elemek kihagyását.

Az ngFor használata statikus számok hurkolására

Az ngFor direktíva a for cikluson alapul, az egyik sok hasznos ciklus, amelyet a JavaScript támogat. Az Angular (14) jelenlegi verziójától kezdve létre kell hoznia egy tömböt, amely tartalmazza a hurkolni kívánt elemek számát.

1. Létrehozhat egy listát magában az ngFor utasításban. A következő kód ötször ismétli meg a bekezdést a 0-tól 4-ig terjedő indexek használatával:

   <div *ngFor='legyen [0, 1, 2, 3, 4] tétele; legyen i = index'>
   <p> Ez egy ismétlődő bekezdés: {{item}} </p>
   </div>

2. Mivel a fenti módszer nem biztos, hogy alkalmas nagy tömbökhöz, dinamikusan is létrehozhat egy tömböt a TypeScript fájlban:

   export osztályPéldaClassmegvalósítjaOnInit{
    számok: Tömb<szám> = [];
   konstruktőr() {
   // Ez dinamikusan létrehozza a következő tömböt:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   ez.számok = Sor(10).tölt(1).map((x, i)=>i);
    }
   }

3. Ezután a HTML-ben lévő számtömbön keresztül lépkedhet:

   <div *ngFor='legyen számok tétele; legyen i = index'>
   <p>Ez egy ismétlődő bekezdés: {{item}}</p>
   </div>

Bizonyos számok átugrása vagy stílusozása

Használhatja a páratlan vagy még ngA változókhoz minden második szám meghatározásához. Ez egy olyan forgatókönyv, ahol ez hasznos lehet, ha a táblázat minden páratlan vagy páros sorát más színnel szeretné stílusozni.

1. Adjon hozzá néhány új CSS-osztályt egy összetevő CSS-fájljához. A következő stílusokat fogja használni bizonyos elemekhez páros vagy páratlan indexeknél:

   .piros {
    piros szín;
   }
   .kék { 
    szín: kék; 
   }
   

2. A páratlan és páros változók deklarálása az ngFor utasításon belül. Ezeket a változókat az Angular felismeri. Rendelje hozzá a piros CSS osztályt a páros számokhoz és a kék CSS osztályt a páratlan számokhoz:

   <div *ngFor='legyen számok tétele; legyen páratlan = páratlan; legyen páros = páros' [ngClass]="{piros: páros, kék: páratlan}">
   <p> Ez egy ismétlődő bekezdés: {{item}} </p>
   </div>

3. Futtassa az Angular webhelyet a használatával ng szolgálni és nyissa meg a webböngészőben. A páros és páratlan HTML-elemek váltakoznak a különböző stílusok között a CSS-osztályuk alapján:
4. Ha minden páros számot teljesen ki akar hagyni, használhatja az ngIf direktívát. Ezzel minden páratlan számot kihagy, és csak a páros számokat jeleníti meg:

   <div *ngFor='legyen számok tétele; legyen páros = páros'>
   <p *ngIf='még'> Ez egy ismétlődő bekezdés: {{item}} </p>
   </div>

Hogyan számoljunk visszafelé

A visszafelé számoláshoz használhat hagyományos módszereket, például egy lista megfordítását vagy a cikluson keresztüli visszaszámlálást index segítségével.

1. Deklaráljon egy indexváltozót az ngFor utasításban. Az ngFor-on belül kezdje a tömb hosszával, és vonja le a már átfutott elemek számát:

   <div *ngFor="legyen számok tétele; legyen i = index;">
   <p> Ez egy ismétlődő bekezdés: {{numbers.length-i-1}} </p>
   </div>

2. Fordított listát is létrehozhat a TypeScript fájlban:

   export osztályPéldaClassmegvalósítjaOnInit{
    számok: Tömb<szám> = [];
    fordított lista: Tömb<szám> = [];
   konstruktőr() {
   ez.számok = Sor(10).tölt(1).map((x, i)=>i);
   ez.reversedList = ez.numbers.slice().reverse();
    }
   }

3. Ismételje meg a fordított listát az ngFor segítségével:

   <div *ngFor='let item of reversedList; legyen i = index'>
   <p> Ez egy ismétlődő bekezdés: {{item}} </p>
   </div>

Hogyan alakítsuk másképp az első és az utolsó elemet

Az első és az utolsó elemet a többi elemtől külön stílusozhatja a első és utolsó Szögváltozók. Ez egy alternatíva CSS psuedo-osztályok használatával tetszik :első gyerek.

1. Az ngFor utasításban deklarálja az első és az utolsó változót. Használja az ngClass direktívát a kék és piros CSS osztályok hozzárendeléséhez az előző lépésekben. Rendelje hozzá a kék CSS osztályt az első elemhez, és a piros CSS osztályt az utolsó elemhez:

   <div *ngFor='legyen számok tétele; legyen első = első; hagyd utolsó = utolsó' [ngClass]= "{kék: első, piros: utolsó}">
   <p> Ez egy ismétlődő bekezdés: {{item}} </p>
   </div>

Az ngFor használata objektumok feletti iterációra

Használhatja az ngFor direktívát az objektumok közötti ciklusra, és hozzáférhet azok egyedi változóihoz.

1. Hozzon létre egy listát az objektumokról a TypeScript fájlban. Ebben az esetben megjelenik az emberek listája adataikkal:

   export osztályPéldaClassmegvalósítjaOnInit{
    emberek = []; 
   konstruktőr() {
   ez.people = [
    { keresztnév: 'János', vezetéknév: 'Kovács', Foglalkozása: 'HR menedzser', kezdődátum: new Date("2019-02-05") },
    { keresztnév: 'Mary', vezetéknév: 'Johnson', Foglalkozása: 'Műszaki tiszt', kezdődátum: new Date("2016-01-07") },
    { keresztnév: 'Vilmos', vezetéknév: 'Barna', Foglalkozása: 'HR munkatárs', kezdődátum: new Date("2018-03-03") },
    ];
    }
   }

2. A HTML-ben használja az ngFor ciklust az emberek listájának áthaladásához. Minden személy elérhető lesz a személy változó. A személy változó segítségével elérheti az egyes személyek attribútumait:

   <div *ngFor='legyen az emberek személye; legyen i = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <p> {{személy.foglalkozás}} </p>
   <p> {{person.startDate}} </p>
   </div>

A Beágyazott ngFor használata más objektumok belsejében lévő objektumok megjelenítésére

A beágyazott ciklust használhatja az objektumok más objektumokon belüli megjelenítésére.

1. Módosítsa a személyek listáját. Minden személynek van egy vészhelyzeti névjegyzéke. Minden vészhelyzeti érintkezőt külön tárgyként tároljon:

   ez.people = [
    {
    keresztnév: 'János',
    vezetéknév: 'Kovács',
    vészhelyzeti elérhetőségek: [
    { név: 'Amanda Smith', kapcsolat: 'Feleség', telefon: '0441239876' },
    { név: 'Barry Smith', kapcsolat: 'Fiú', telefon: '0442239876'}
    ]
    },
    {
    keresztnév: 'Mary',
    vezetéknév: 'Johnson',
    vészhelyzeti elérhetőségek: [
    { név: 'Mark Johnson', kapcsolat: 'Férj', telefon: '0443239876' }
    ]
    },
    ];

2. A HTML-ben hozzon létre egy beágyazott hurkot az eredeti hurkon belül, hogy végigfusson minden vészhelyzeti kapcsolaton, és megjelenítse a részleteket:

   <div *ngFor='legyen az emberek személye; legyen i = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='személy kapcsolatfelvételének engedélyezése.sürgősségi Kapcsolatok; legyen j = index'>
   <h5> Sürgősségi elérhetőségek: </h5>
   <p> {{contact.name}} </p>
   <p> {{személy.kapcsolat}} </p>
   <p> {{person.phone}} </p>
   </div>
   <br>
   </div>

Hurkolás ngFor használatával Angularban

Az ngFor strukturális direktíva segítségével dinamikusan lépkedhet a HTML elemek között a webhelyén. Ez lehetővé teszi, hogy ugyanazt a blokkot megismételje több objektumhoz, vagy meghatározott számú alkalommal.

Használhatja más trükkök végrehajtására is, például minden páros vagy páratlan szám kihagyására vagy az első és az utolsó elem stílusának kialakítására. Használhatja számos objektum dinamikus megjelenítésére is más objektumokon belül.

Vannak más Angular direktívák is, amelyek segítségével dinamikusabbá teheti webhelyét. Ezek közé tartozik az ngIf, ngSwitch, ngStyle, ngClass és ngModel.