Angular에서 루프 반복 인덱스

*ngFor와 @for를 통해 반복할 때, 배열 요소뿐만 아니라 그 인덱스도 얻을 수 있습니다. 어떻게 하는지 살펴보겠습니다. 메인 컴포넌트에 다음과 같은 배열이 있다고 가정해 보겠습니다:

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}

요소와 인덱스를 모두 출력해 보겠습니다.

*ngFor 지시자의 경우, 이를 위해 특별한 방법을 사용합니다:

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

@for 구문의 경우, 루프 내에서 이 변수를 바로 사용할 수 있습니다:

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

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}