ngFor에서 현재 인덱스 가져오기

직원 목록인 배열에 데이터를 저장할 때 *ngFor 함수를 사용하여 이 데이터를 웹 페이지의 표 형식으로 변환할 수 있습니다.

*ngFor에서 인덱싱할 때 배열의 항목 목록에 번호를 지정하는 데 도움이 되므로 목록의 항목을 더 쉽게 추적할 수 있습니다. 특히 목록에 있는 긴 범위의 항목을 처리할 때 그렇습니다.

예를 들어, 코스 목록을 다루고 있으므로 app.component.ts에서 배열에 목록을 만들고 이름을 courses로 지정합니다.

배열에 부여한 이름을 염두에 두어야 합니다. 그 이름에서 i-변수를 사용하여 인덱스를 가져오기 위해 *ngFor를 사용할 것이기 때문입니다.

app.component.ts에서 다음을 입력합니다.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  courses = [
    { id:1, name:'course1' },
    { id:2, name:'course2' },
    { id:3, name:'course3' }
  ];
}

어레이를 보면 처음에 설명했듯이 courses라는 이름이 지정되었음을 알 수 있습니다.

다음은 app.component.html로 이동하여 *ngFor 함수를 전달하는 것입니다. 이 함수는 어레이가 인덱싱되도록 하는 역할을 합니다.

여기에서 몇 가지 지침을 전달합니다.

<ul>
  <li *ngFor="let course of courses; index as i">
      {{ i }} - {{ course.name }}
  </li>
</ul>

출력 샘플 링크.