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'];
}

인덱스를 출력하되, 0이 아닌 1부터 시작하도록 하세요.