Как да използвате директивата ngFor Angular

Angular използва директиви за динамично изобразяване на определени HTML елементи на вашия уебсайт. Една от структурните директиви, които можете да използвате, е ngFor.

Директивата ngFor ви позволява да повтаряте един и същ блок определен брой пъти или да преглеждате масив от обекти, за да покажете техните подробности. Това е мощен инструмент, който дори можете да използвате за изобразяване на обекти в други обекти.

Освен това има много функции, които могат да бъдат полезни в конкретни сценарии. Това включва намиране на първия и последния елемент или пропускане на определени елементи.

Как да използвате ngFor, за да преглеждате статични числа

Директивата ngFor се основава на цикъла for, един от много полезни цикли, които JavaScript поддържа. От текущата версия на Angular (14) ще трябва да създадете масив, който има броя на елементите, през които искате да преминете.

1. Можете да създадете списък в самия оператор ngFor. Следният код ще повтори параграф пет пъти, използвайки индекси от 0 до 4:

   <div *ngFor='нека елемент от [0, 1, 2, 3, 4]; нека i = индекс'>
   <стр> Това е повтарящ се параграф: {{item}} </стр>
   </div>

2. Тъй като горният метод може да не е подходящ за големи масиви, можете също така динамично да създадете масив във файла TypeScript:

   износ класПример класинструментиOnInit{
    числа: масив<номер> = [];
   конструктор() {
   // Това динамично ще създаде следния масив:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   това.числа = масив(10).fill(1).map((x, i)=>i);
    }
   }

3. След това можете да преминете през масива от числа в HTML:

   <div *ngFor='нека елемент от числа; нека i = индекс'>
   <стр>Това е повтарящ се параграф: {{item}}</стр>
   </div>

Как да пропуснете или стилизирате определени числа

Можете да използвате странно или дори ngЗа променливи за определяне на всяко второ число. Сценарий, при който може да намерите това за полезно, е, ако искате да стилизирате всеки нечетен или четен ред в таблица, като използвате различен цвят.

1. В CSS файла за компонент добавете някои нови CSS класове. Това са стиловете, които ще използвате за определени елементи при четни или нечетни индекси:

   .червен {
    цвят: червен;
   }
   .син { 
    цвят: син; 
   }
   

2. Декларирайте нечетни и четни променливи в оператора ngFor. Това са променливи, които Angular ще разпознае. Задайте червения CSS клас на четни числа и синия CSS клас на нечетни числа:

   <div *ngFor='нека елемент от числа; нека отд = нечетен; нека четно = четно' [ngClass]="{червено: четно, синьо: нечетно}">
   <стр> Това е повтарящ се параграф: {{item}} </стр>
   </div>

3. Стартирайте вашия Angular уебсайт с помощта на ng служи и го отворете в уеб браузъра. Четни и нечетни HTML елементи ще се редуват между различните стилове въз основа на техния CSS клас:
4. Ако искате да пропуснете напълно всяко четно число, можете да използвате директивата ngIf. Това ще пропусне всички нечетни числа и ще покаже само числа, които са четни:

   <div *ngFor='нека елемент от числа; нека четно = четно'>
   <p *ngIf='дори'> Това е повтарящ се параграф: {{item}} </стр>
   </div>

Как да броим назад

За да броите назад, можете да използвате традиционни методи като обръщане на списък или броене назад през цикъла с помощта на индекс.

1. Декларирайте индексна променлива в оператора ngFor. В рамките на ngFor започнете от дължината на масива и извадете броя на елементите, през които вече сте преминали:

   <div *ngFor="нека елемент от числа; нека i = индекс;">
   <стр> Това е повтарящ се параграф: {{numbers.length-i-1}} </стр>
   </div>

2. Можете също да създадете обърнат списък във файла TypeScript:

   износ класПример класинструментиOnInit{
    числа: масив<номер> = [];
    reversedList: Масив<номер> = [];
   конструктор() {
   това.числа = масив(10).fill(1).map((x, i)=>i);
   това.reversedList = това.numbers.slice().reverse();
    }
   }

3. Повторете обратния списък с помощта на ngFor:

   <div *ngFor='нека елемент от reversedList; нека i = индекс'>
   <стр> Това е повтарящ се параграф: {{item}} </стр>
   </div>

Как да стилизирате по различен начин първия и последния елемент

Можете да стилизирате първия и последния елемент отделно от другите елементи, като използвате първо и последно Ъглови променливи. Това е алтернатива на използвайки CSS псевдо-класове като :първо дете.

1. В оператора ngFor декларирайте първата и последната променлива. Използвайте директивата ngClass, за да присвоите сините и червените CSS класове в предишните стъпки. Присвоете синия CSS клас на първия елемент и червения CSS клас на последния елемент:

   <div *ngFor='нека елемент от числа; нека първо = първо; нека последно = последно' [ngClass]= "{синьо: първо, червено: последно}">
   <стр> Това е повтарящ се параграф: {{item}} </стр>
   </div>

Как да използвате ngFor за итериране на обекти

Можете да използвате директивата ngFor, за да преглеждате обекти и да осъществявате достъп до техните отделни променливи.

1. Създайте списък с обекти във файла TypeScript. В този случай ще има списък с хора с техните данни:

   износ класПример класинструментиOnInit{
    хора = []; 
   конструктор() {
   това.people = [
    { първо име: 'Джон', фамилия: 'Смит', професия: 'Мениджър човешки ресурси', начална дата: нова дата("2019-02-05") },
    { първо име: 'Дева Мария', фамилия: 'Джонсън', професия: 'Технически служител', начална дата: нова дата("2016-01-07") },
    { първо име: 'Уилям', фамилия: 'Кафяв', професия: 'Служител по човешки ресурси', начална дата: нова дата("2018-03-03") },
    ];
    }
   }

2. В HTML, използвайте цикъла ngFor, за да прегледате списъка с хора. Всеки човек ще бъде достъпен чрез лице променлива. Можете да използвате променливата person за достъп до атрибутите на всяко лице:

   <div *ngFor='нека човек от хора; нека i = индекс'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <стр> {{person.occupation}} </стр>
   <стр> {{person.startDate}} </стр>
   </div>

Как да използвате вложен ngFor за показване на обекти вътре в други обекти

Можете да използвате вложен цикъл for за показване на обекти вътре в други обекти.

1. Променете списъка с хора. Всеки човек ще има списък с контакти за спешни случаи. Съхранявайте всеки контакт за спешни случаи като отделен обект:

   това.people = [
    {
    първо име: 'Джон',
    фамилия: 'Смит',
    Контакти за спешни случаи: [
    { име: 'Аманда Смит', връзка: 'Съпруга', телефон: '0441239876' },
    { име: 'Бари Смит', връзка: 'син', телефон: '0442239876'}
    ]
    },
    {
    първо име: 'Дева Мария',
    фамилия: 'Джонсън',
    Контакти за спешни случаи: [
    { име: 'Марк Джонсън', връзка: 'съпруг', телефон: '0443239876' }
    ]
    },
    ];

2. В HTML създайте вложен цикъл във вашия оригинален цикъл, за да преминете през всеки контакт при спешни случаи и покажете техните подробности:

   <div *ngFor='нека човек от хора; нека i = индекс'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='нека контакт на person.emergencyContacts; нека j = индекс'>
   <h5> Контакти за спешни случаи: </h5>
   <стр> {{име за контакт}} </стр>
   <стр> {{person.relationship}} </стр>
   <стр> {{person.phone}} </стр>
   </div>
   <бр>
   </div>

Цикъл с помощта на ngFor в Angular

Можете да използвате структурната директива ngFor за динамично преминаване през HTML елементи на вашия уебсайт. Това ще ви позволи да повторите един и същ блок за определен брой обекти или за определен брой пъти.

Можете също да го използвате, за да правите други трикове, като пропускане на всяко четно или нечетно число или стилизиране на първия и последния елемент. Можете също да го използвате за динамично изобразяване на много обекти в други обекти.

Има и други директиви на Angular, които можете да използвате, за да направите уебсайта си по-динамичен. Те включват ngIf, ngSwitch, ngStyle, ngClass и ngModel.