Ako používať smernicu ngFor Angular

Angular používa príkazy na dynamické vykresľovanie určitých prvkov HTML na vašej webovej lokalite. Jedna zo štrukturálnych direktív, ktoré môžete použiť, je ngFor.

Direktíva ngFor vám umožňuje opakovať ten istý blok stanovený počet krát alebo prechádzať cez pole objektov, aby ste zobrazili ich podrobnosti. Je to výkonný nástroj, ktorý môžete použiť aj na vykreslenie objektov v iných objektoch.

Má tiež veľa funkcií, ktoré môžu byť užitočné v konkrétnych scenároch. To zahŕňa nájdenie prvého a posledného prvku alebo preskočenie určitých položiek.

Ako používať ngFor na pretáčanie statických čísel

Direktíva ngFor je založená na slučke for, jednej z nich veľa užitočných slučiek, ktoré JavaScript podporuje. Od aktuálnej verzie Angular (14) budete musieť vytvoriť pole s počtom položiek, ktoré chcete prechádzať.

1. Zoznam môžete vytvoriť v samotnom príkaze ngFor. Nasledujúci kód zopakuje odsek päťkrát s použitím indexov 0 až 4:

   <div *ngFor='nech položka [0, 1, 2, 3, 4]; nech i = index'>
   <p> Toto je opakovaný odsek: {{item}} </str>
   </div>

2. Keďže vyššie uvedená metóda nemusí byť vhodná pre veľké polia, pole môžete vytvoriť aj dynamicky v súbore TypeScript:

   export triedaPríkladClassnáradiaOnInit{
    čísla: Array<číslo> = [];
   konštruktér() {
   // Toto dynamicky vytvorí nasledujúce pole:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   toto.čísla = Pole(10).fill(1).map((x, i)=>i);
    }
   }

3. Potom môžete prechádzať cez pole čísel v HTML:

   <div *ngFor='nech položka čísel; nech i = index'>
   <p>Toto je opakovaný odsek: {{item}}</str>
   </div>

Ako preskočiť alebo upraviť niektoré čísla

Môžete použiť zvláštny alebo dokonca ngPre premenné na určenie každého druhého čísla. Scenár, v ktorom to môže byť užitočné, je, ak chcete upraviť každý nepárny alebo párny riadok v tabuľke pomocou inej farby.

1. Do súboru CSS pre komponent pridajte niekoľko nových tried CSS. Toto sú štýly, ktoré použijete pre určité prvky v párnych alebo nepárnych indexoch:

   .red {
    farba: červená;
   }
   .Modrá { 
    farba: modrá; 
   }
   

2. Deklarujte nepárne a párne premenné v rámci príkazu ngFor. Toto sú premenné, ktoré Angular rozpozná. Priraďte červenú triedu CSS k párnym číslam a modrú triedu CSS k nepárnym číslam:

   <div *ngFor='nech položka čísel; nech nepárny = nepárny; nech párny = párny' [ngClass]="{červená: párne, modrá: nepárne}">
   <p> Toto je opakovaný odsek: {{item}} </str>
   </div>

3. Spustite svoj web Angular pomocou ng slúžiť a otvorte ho vo webovom prehliadači. Párne a nepárne prvky HTML sa budú striedať medzi rôznymi štýlmi na základe ich triedy CSS:
4. Ak chcete úplne preskočiť každé párne číslo, môžete použiť direktívu ngIf. Tým sa preskočia všetky nepárne čísla a zobrazia sa iba párne čísla:

   <div *ngFor='nech položka čísel; nech párny = párny'>
   <p *ngIf='dokonca'> Toto je opakovaný odsek: {{item}} </str>
   </div>

Ako počítať dozadu

Na spätné počítanie môžete použiť tradičné metódy, ako je obrátenie zoznamu alebo spätné počítanie v slučke pomocou indexu.

1. Deklarujte premennú indexu v príkaze ngFor. V rámci ngFor začnite od dĺžky poľa a odpočítajte počet položiek, ktoré ste už prešli:

   <div *ngFor="nech položka čísel; nech i = index;">
   <p> Toto je opakovaný odsek: {{čísla.dĺžka-i-1}} </str>
   </div>

2. Môžete tiež vytvoriť obrátený zoznam v súbore TypeScript:

   export triedaPríkladClassnáradiaOnInit{
    čísla: Array<číslo> = [];
    reversedList: Pole<číslo> = [];
   konštruktér() {
   toto.čísla = Pole(10).fill(1).map((x, i)=>i);
   toto.reversedList = toto.čísla.výrez().reverzne();
    }
   }

3. Iterujte obrátený zoznam pomocou ngFor:

   <div *ngFor='nech položka z reversedList; nech i = index'>
   <p> Toto je opakovaný odsek: {{item}} </str>
   </div>

Ako odlišne upraviť prvý a posledný prvok

Prvý a posledný prvok môžete upraviť oddelene od ostatných prvkov pomocou najprv a posledný Uhlové premenné. Toto je alternatíva k pomocou CSS psuedo-tried Páči sa mi to :prvorodenec.

1. V príkaze ngFor deklarujte prvú a poslednú premennú. Použite direktívu ngClass na priradenie modrej a červenej triedy CSS v predchádzajúcich krokoch. Priraďte modrú triedu CSS prvému prvku a červenú triedu CSS poslednému prvku:

   <div *ngFor='nech položka čísel; nechať prvý = prvý; nechať trvať = trvať' [ngClass]= "{modrá: prvá, červená: posledná}">
   <p> Toto je opakovaný odsek: {{item}} </str>
   </div>

Ako používať ngFor na iteráciu objektov

Direktívu ngFor môžete použiť na precyklenie objektov a prístup k ich jednotlivým premenným.

1. Vytvorte zoznam objektov v súbore TypeScript. V tomto prípade bude zoznam ľudí s ich podrobnosťami:

   export triedaPríkladClassnáradiaOnInit{
    ľudia = []; 
   konštruktér() {
   toto.ľudia = [
    { krstné meno: 'John', priezvisko: 'Smith', povolanie: 'HR manažér', počiatočný dátum: nový dátum("2019-02-05") },
    { krstné meno: 'Mary', priezvisko: 'Johnson', povolanie: 'Technický dôstojník', počiatočný dátum: nový dátum("2016-01-07") },
    { krstné meno: 'William', priezvisko: 'Hnedá', povolanie: 'HR Officer', počiatočný dátum: nový dátum("2018-03-03") },
    ];
    }
   }

2. V HTML použite slučku ngFor na precyklenie zoznamu ľudí. Každá osoba bude prístupná pomocou osoba premenlivý. Premennú osoba môžete použiť na prístup k atribútom každej osoby:

   <div *ngFor='nechať osobu ľudí; nech i = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <p> {{person.occupation}} </str>
   <p> {{person.startDate}} </str>
   </div>

Ako používať vnorený ngFor na zobrazenie objektov vo vnútri iných objektov

Na zobrazenie objektov v iných objektoch môžete použiť vnorenú slučku for.

1. Upravte zoznam ľudí. Každá osoba bude mať núdzový zoznam kontaktov. Uložte každý núdzový kontakt ako samostatný predmet:

   toto.ľudia = [
    {
    krstné meno: 'John',
    priezvisko: 'Smith',
    núdzové kontakty: [
    { názov: 'Amanda Smithová', vzťah: 'Manželka', telefón: '0441239876' },
    { názov: 'Barry Smith', vzťah: 'Syn', telefón: '0442239876'}
    ]
    },
    {
    krstné meno: 'Mary',
    priezvisko: 'Johnson',
    núdzové kontakty: [
    { názov: 'Mark Johnson', vzťah: 'manžel', telefón: '0443239876' }
    ]
    },
    ];

2. V kóde HTML vytvorte vnorenú slučku vo svojej pôvodnej slučke, aby ste prešli cez každý núdzový kontakt a zobrazili jeho podrobnosti:

   <div *ngFor='nechať osobu ľudí; nech i = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='nechať kontakt na osobu.núdzovéKontakty; nech j = index'>
   <h5> Núdzové kontakty: </h5>
   <p> {{kontaktné meno}} </str>
   <p> {{person.relationship}} </str>
   <p> {{person.phone}} </str>
   </div>
   <br>
   </div>

Looping pomocou ngFor v Angular

Štrukturálnu direktívu ngFor môžete použiť na dynamickú slučku prvkov HTML na vašej webovej lokalite. To vám umožní opakovať rovnaký blok pre určitý počet objektov alebo pre určený počet krát.

Môžete ho použiť aj na ďalšie triky, ako je preskočenie každého párneho alebo nepárneho čísla alebo úprava prvého a posledného prvku. Môžete ho použiť aj na dynamické vykresľovanie mnohých objektov v rámci iných objektov.

Existujú aj ďalšie direktívy Angular, ktoré môžete použiť na zvýšenie dynamiky vášho webu. Patria sem ngIf, ngSwitch, ngStyle, ngClass a ngModel.