Jak používat směrnici ngFor Angular

Angular používá direktivy k dynamickému vykreslování určitých prvků HTML na vašem webu. Jedna ze strukturálních direktiv, kterou můžete použít, je ngFor.

Direktiva ngFor vám umožňuje opakovat stejný blok zadaný početkrát nebo procházet polem objektů a zobrazit jejich podrobnosti. Je to mocný nástroj, který můžete dokonce použít k vykreslení objektů v jiných objektech.

Má také mnoho funkcí, které mohou být užitečné v konkrétních scénářích. To zahrnuje nalezení prvního a posledního prvku nebo přeskočení určitých položek.

Jak používat ngFor k procházení statických čísel

Direktiva ngFor je založena na cyklu for, jedné z nich mnoho užitečných smyček, které JavaScript podporuje. Od aktuální verze Angular (14) budete muset vytvořit pole, které má počet položek, kterými chcete procházet.

1. V samotném příkazu ngFor můžete vytvořit seznam. Následující kód zopakuje odstavec pětkrát s použitím indexů 0 až 4:
   instagram viewer

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

2. Protože výše uvedená metoda nemusí být vhodná pro velká pole, můžete také dynamicky vytvořit pole v souboru TypeScript:

   vývozní třídaPříkladClassnářadíOnInit{
    čísla: Pole<číslo> = [];
   konstruktér() {
   // Toto dynamicky vytvoří následující pole:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   tento.čísla = Pole(10).vyplnit(1).map((x, i)=>i);
    }
   }

3. Poté můžete procházet pole čísel v HTML:

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

Jak přeskočit nebo upravit určitá čísla

Můžete použít zvláštní nebo dokonce ngPro proměnné k určení každého druhého čísla. Scénář, kde to může být užitečné, je, pokud chcete stylovat každý lichý nebo sudý řádek v tabulce pomocí jiné barvy.

1. Do souboru CSS pro komponent přidejte některé nové třídy CSS. Toto jsou styly, které použijete pro určité prvky na sudých nebo lichých indexech:

   .Červené {
    červená barva;
   }
   .modrý { 
    barva: modrá; 
   }
   

2. Deklarujte liché a sudé proměnné v příkazu ngFor. Toto jsou proměnné, které Angular rozpozná. Přiřaďte červenou třídu CSS sudým číslům a modrou třídu CSS lichým číslům:

   <div *ngFor='let položka čísel; nechat lichý = lichý; nechat sudý = sudý' [ngClass]="{červená: sudá, modrá: lichá}">
   <p> Toto je opakovaný odstavec: {{item}} </str>
   </div>

3. Spusťte svůj web Angular pomocí ng sloužit a otevřete jej ve webovém prohlížeči. Sudé a liché prvky HTML se budou střídat mezi různými styly na základě jejich třídy CSS:
4. Pokud chcete úplně přeskočit každé sudé číslo, můžete použít direktivu ngIf. Tím se přeskočí všechna lichá čísla a zobrazí se pouze čísla, která jsou sudá:

   <div *ngFor='let položka čísel; nechat sudý = sudý'>
   <p *ngIf='dokonce'> Toto je opakovaný odstavec: {{item}} </str>
   </div>

Jak počítat dozadu

Chcete-li počítat zpět, můžete použít tradiční metody, jako je obrácení seznamu nebo počítání zpět ve smyčce pomocí indexu.

1. Deklarujte proměnnou indexu v příkazu ngFor. V rámci ngFor začněte od délky pole a odečtěte počet položek, kterými jste již prošli:

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

2. Můžete také vytvořit obrácený seznam v souboru TypeScript:

   vývozní třídaPříkladClassnářadíOnInit{
    čísla: Pole<číslo> = [];
    reversedList: Pole<číslo> = [];
   konstruktér() {
   tento.čísla = Pole(10).vyplnit(1).map((x, i)=>i);
   tento.reversedList = tento.čísla.slice().reverse();
    }
   }

3. Iterujte obrácený seznam pomocí ngFor:

   <div *ngFor='let item of reversedList; nechť i = index'>
   <p> Toto je opakovaný odstavec: {{item}} </str>
   </div>

Jak odlišit styl prvního a posledního prvku

První a poslední prvek můžete stylovat odděleně od ostatních prvků pomocí První a poslední Úhlové proměnné. Toto je alternativa k pomocí CSS pseudo-tříd jako :první dítě.

1. V příkazu ngFor deklarujte první a poslední proměnné. Použijte direktivu ngClass k přiřazení modré a červené třídy CSS v předchozích krocích. Přiřaďte modrou třídu CSS k prvnímu prvku a červenou třídu CSS k poslednímu prvku:

   <div *ngFor='let položka čísel; nechat první = první; nechat trvat = trvat' [ngClass]= "{modrá: první, červená: poslední}">
   <p> Toto je opakovaný odstavec: {{item}} </str>
   </div>

Jak používat ngFor k iteraci přes objekty

Direktivu ngFor můžete použít k procházení objektů a přístupu k jejich jednotlivým proměnným.

1. Vytvořte seznam objektů v souboru TypeScript. V tomto případě bude seznam osob s jejich podrobnostmi:

   vývozní třídaPříkladClassnářadíOnInit{
    lidé = []; 
   konstruktér() {
   tento.lidé = [
    { jméno: 'John', příjmení: 'Kovář', obsazení: 'Manažer lidských zdrojů', počáteční datum: nové datum("2019-02-05") },
    { jméno: 'Marie', příjmení: 'Johnson', obsazení: 'Technický důstojník', počáteční datum: nové datum("2016-01-07") },
    { jméno: 'William', příjmení: 'Hnědý', obsazení: 'HR Officer', počáteční datum: nové datum("2018-03-03") },
    ];
    }
   }

2. V HTML použijte smyčku ngFor k procházení seznamu lidí. Každá osoba bude přístupná pomocí osoba variabilní. Proměnnou person můžete použít pro přístup k atributům každé osoby:

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

Jak používat vnořený ngFor k zobrazení objektů uvnitř jiných objektů

K zobrazení objektů uvnitř jiných objektů můžete použít vnořenou smyčku for.

1. Upravte seznam lidí. Každá osoba bude mít nouzový seznam kontaktů. Uložte každý nouzový kontakt jako samostatný předmět:

   tento.lidé = [
    {
    jméno: 'John',
    příjmení: 'Kovář',
    nouzové kontakty: [
    { název: 'Amanda Smithová', vztah: 'Manželka', telefon: '0441239876' },
    { název: 'Barry Smith', vztah: 'Syn', telefon: '0442239876'}
    ]
    },
    {
    jméno: 'Marie',
    příjmení: 'Johnson',
    nouzové kontakty: [
    { název: 'Mark Johnson', vztah: 'Manžel', telefon: '0443239876' }
    ]
    },
    ];

2. V kódu HTML vytvořte v původní smyčce vnořenou smyčku, která bude procházet každým nouzovým kontaktem a zobrazí jeho podrobnosti:

   <div *ngFor='nechat osobu lidí; nechť i = index'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='nechat kontakt na osobu.emergencyContacts; nechť j = index'>
   <h5> Nouzové kontakty: </h5>
   <p> {{kontaktní jméno}} </str>
   <p> {{person.relationship}} </str>
   <p> {{person.phone}} </str>
   </div>
   <br>
   </div>

Looping pomocí ngFor v Angular

Strukturální direktivu ngFor můžete použít k dynamickému procházení prvků HTML na vašem webu. To vám umožní opakovat stejný blok pro určitý počet objektů nebo pro určitý počet opakování.

Můžete jej také použít k dalším trikům, jako je přeskakování každého sudého nebo lichého čísla nebo stylizace prvního a posledního prvku. Můžete jej také použít k dynamickému vykreslování mnoha objektů v jiných objektech.

Existují další direktivy Angular, které můžete použít k tomu, aby byl váš web dynamičtější. Patří mezi ně ngIf, ngSwitch, ngStyle, ngClass a ngModel.