Что такое свойство index в директиве ngFor?

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

Пример использования ngFor с index

Рассмотрим простой пример, в котором мы будем отображать список пользователей и отображать их порядковые номера с помощью свойства index.

1. Создаем компонент

Вы сначала должны создать новый компонент, если у вас его еще нет. Например, создадим компонент user-list.

ng generate component user-list

2. Определяем данные

В файле user-list.component.ts определите массив пользователей:

import { Component } from '@angular/core';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent {
  users = [
    { name: 'Иван', age: 25 },
    { name: 'Мария', age: 30 },
    { name: 'Петр', age: 22 },
    { name: 'Анна', age: 28 },
  ];
}

3. Отображаем данных с помощью ngFor

Теперь, в файле user-list.component.html, используем директиву ngFor, чтобы отобразить список пользователей с добавлением индекса:

<ul>
  <li *ngFor="let user of users; let i = index">
    {{ i + 1 }}. {{ user.name }} ({{ user.age }} лет)
  </li>
</ul>

Объяснение кода

• *ngFor="let user of users; let i = index":
  • let user of users - здесь мы перебираем массив users и каждый элемент массива доступен под именем user.
  • let i = index - это создаёт переменную i, которая будет содержать индекс текущего элемента в итерации (начиная с 0).
• Внутри li мы используем {{ i + 1 }}, чтобы отобразить номер пользователя, начиная с 1, а не с 0, как это делает массив.

Заключение

Директива ngFor и её свойство index очень полезны при работе с итерацией списков в Angular. Это позволяет легко управлять порядком элементов и может улучшить визуализацию и логику приложения.

Если у вас есть другие вопросы по Angular или вы хотите углубиться в другую тему, не стесняйтесь задавать их!