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

Angular использует директивы для динамического отображения определенных элементов HTML на вашем сайте. Одной из структурных директив, которую вы можете использовать, является ngFor.

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

Он также имеет множество функций, которые могут быть полезны в определенных сценариях. Это включает в себя поиск первого и последнего элементов или пропуск определенных элементов.

Как использовать ngFor для перебора статических чисел

Директива ngFor основана на цикле for, одном из множество полезных циклов, которые поддерживает JavaScript

1. Вы можете создать список внутри самой инструкции ngFor. Следующий код будет повторять абзац пять раз, используя индексы от 0 до 4:

   <div *ngFor='пусть элемент [0, 1, 2, 3, 4]; пусть я = индекс'>
   <п> Это повторяющийся абзац: {{item}} </п>
   </div>

2. Поскольку описанный выше метод может не подойти для больших массивов, вы также можете динамически создать массив в файле TypeScript:

   экспорт учебный классПримерКлассреализуетOnInit{
    числа: массив<количество> = [];
   конструктор() {
   // Это динамически создаст следующий массив:
   // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   это.номера = Множество(10).наполнять(1).map((x, i)=>i);
    }
   }

3. Затем вы можете перебрать массив чисел в HTML:

   <div *ngFor='пусть пункт чисел; пусть я = индекс'>
   <п>Это повторяющийся абзац: {{item}}</п>
   </div>

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

Вы можете использовать странный или же даже Переменные ngFor для определения каждого второго числа. Сценарий, в котором вы можете найти это полезным, — если вы хотите стилизовать каждую нечетную или четную строку в таблице, используя другой цвет.

1. В файле CSS для компонента добавьте несколько новых классов CSS. Это стили, которые вы будете использовать для определенных элементов с четными или нечетными индексами:

   .красный {
    красный цвет;
   }
   .синий { 
    цвет синий; 
   }
   

2. Объявите нечетные и четные переменные в операторе ngFor. Это переменные, которые Angular распознает. Назначьте красный класс CSS четным числам, а синий класс CSS — нечетным числам:

   <div *ngFor='пусть пункт чисел; пусть нечетное = нечетное; пусть даже = даже' [нгкласс] ="{красный: четный, синий: нечетный}">
   <п> Это повторяющийся абзац: {{item}} </п>
   </div>

3. Запустите свой веб-сайт Angular, используя нг служить и откройте его в веб-браузере. Четные и нечетные элементы HTML будут чередоваться между разными стилями в зависимости от их класса CSS:
4. Если вы хотите полностью пропустить каждое четное число, вы можете использовать директиву ngIf. Это пропустит все нечетные числа и отобразит только четные числа:

   <div *ngFor='пусть пункт чисел; пусть даже = даже'>
   <р *нгЕсли='даже'> Это повторяющийся абзац: {{item}} </п>
   </div>

Как считать в обратном порядке

Чтобы считать в обратном направлении, вы можете использовать традиционные методы, такие как обращение списка или обратный счет в цикле с использованием индекса.

1. Объявите индексную переменную в операторе ngFor. В ngFor начните с длины массива и вычтите количество элементов, которые вы уже прошли:

   <div *ngFor="пусть пункт чисел; пусть я = индекс;">
   <п> Это повторяющийся абзац: {{numbers.length-i-1}} </п>
   </div>

2. Вы также можете создать перевернутый список в файле TypeScript:

   экспорт учебный классПримерКлассреализуетOnInit{
    числа: массив<количество> = [];
    реверслист: массив<количество> = [];
   конструктор() {
   это.номера = Множество(10).наполнять(1).map((x, i)=>i);
   это.реверседлист = это.numbers.slice().reverse();
    }
   }

3. Итерация по перевернутому списку с помощью ngFor:

   <div *ngFor='пусть элемент reversedList; пусть я = индекс'>
   <п> Это повторяющийся абзац: {{item}} </п>
   </div>

Как по-разному стилизовать первый и последний элементы

Вы можете стилизовать первый и последний элементы отдельно от других элементов, используя первый а также последний Угловые переменные. Это альтернатива использование псевдоклассов CSS как :Первый ребенок.

1. В операторе ngFor объявите первую и последнюю переменные. Используйте директиву ngClass, чтобы назначить синий и красный классы CSS на предыдущих шагах. Назначьте синий класс CSS первому элементу, а красный класс CSS — последнему элементу:

   <div *ngFor='пусть пункт чисел; пусть первый = первый; пусть последний = последний' [нгкласс] = "{синий: первый, красный: последний}">
   <п> Это повторяющийся абзац: {{item}} </п>
   </div>

Как использовать ngFor для перебора объектов

Вы можете использовать директиву ngFor для перебора объектов и доступа к их отдельным переменным.

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

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

2. В HTML используйте цикл ngFor для перебора списка людей. Каждый человек будет доступен с помощью человек переменная. Вы можете использовать переменную person для доступа к атрибутам каждого человека:

   <div *ngFor='пусть лицо людей; пусть я = индекс'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <п> {{person.occupation}} </п>
   <п> {{person.startDate}} </п>
   </div>

Как использовать вложенный ngFor для отображения объектов внутри других объектов

Вы можете использовать вложенный цикл for для отображения объектов внутри других объектов.

1. Изменить список людей. У каждого человека будет список контактов на случай чрезвычайной ситуации. Сохраняйте каждый экстренный контакт как отдельный объект:

   это.люди = [
    {
    Имя: 'Джон',
    фамилия: 'Смит',
    аварийная службаКонтакты: [
    { имя: 'Аманда Смит', отношение: 'Жена', Телефон: '0441239876' },
    { имя: 'Барри Смит', отношение: 'Сын', Телефон: '0442239876'}
    ]
    },
    {
    Имя: 'Мэри',
    фамилия: 'Джонсон',
    аварийная службаКонтакты: [
    { имя: 'Марк Джонсон', отношение: 'Муж', Телефон: '0443239876' }
    ]
    },
    ];

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

   <div *ngFor='пусть лицо людей; пусть я = индекс'>
   <h2> {{person.firstName}} {{person.lastName}} </h2>
   <div *ngFor='пусть контакт человека.emergencyContacts; пусть j = индекс'>
   <h5> Контакты для экстренных случаев: </h5>
   <п> {{Контактное лицо}} </п>
   <п> {{человек.отношения}} </п>
   <п> {{человек.телефон}} </п>
   </div>
   <бр>
   </div>

Зацикливание с использованием ngFor в Angular

Вы можете использовать структурную директиву ngFor для динамического перебора HTML-элементов на вашем веб-сайте. Это позволит вам повторить один и тот же блок для нескольких объектов или заданное количество раз.

Вы также можете использовать его для других трюков, таких как пропуск каждого четного или нечетного числа или стилизация первого и последнего элемента. Вы также можете использовать его для динамического рендеринга многих объектов внутри других объектов.

Существуют и другие директивы Angular, которые вы можете использовать, чтобы сделать свой сайт более динамичным. К ним относятся ngIf, ngSwitch, ngStyle, ngClass и ngModel.