Индексы итераций циклов в Angular

При переборе через *ngFor и @for можно получать не только элементы массива, но и их номера. Давайте посмотрим, как это делается. Пусть у нас в главном компоненте есть массив:

export class AppComponent { public arr: string[] = ['a', 'b', 'c', 'd']; }

Давайте выведем как его элементы, так и номера.

Для директивы *ngFor для этого используется специальный хитрый прием:

<ul> <li *ngFor="let el of arr; let i = index"> {{ i }} {{ el }} </li> </ul>

А для конструкции @for можно просто брать и пользоваться этой переменной внутри цикла:

<ul> @for (el of arr; track $index) { <li> {{ $index }} {{ el }} </li> } </ul>

Дан массив:

export class AppComponent { public arr: string[] = ['a', 'b', 'c', 'd']; }

Выведите его номера, но так, чтобы они начинались с единицы, а не с нуля.