*ngAngular의 For 지시문

NgFor는 배열이나 객체와 같은 항목을 쉽게 반복하고 각 항목에 대한 템플릿을 생성할 수 있게 해주는 기본 제공 템플릿 지시문입니다.

이 게시물은 Angular 2 이상을 다룹니다.

다음은 기본 사용 예입니다.

<ul>
  <li *ngFor="let user of users">{{ user.name }}</li>
</ul>

그러면 다음과 같은 html이 출력됩니다.

<ul>
  <li>Al Dente</li>
  <li>D. Liver</li>
  <li>Pepe Roni</li>
</ul>

let user는 템플릿에서 사용할 수 있는 로컬 변수를 만듭니다.
of users는 구성 요소에서 사용할 수 있어야 하는 iterable 사용자를 반복한다는 의미입니다.
ngFor 앞의 * 문자는 부모 템플릿을 생성합니다. 다음 구문에 대한 바로 가기입니다: template="ngFor let item of items”.

사용 가능한 지역 변수

index, first, last, even 및 내보낸 값에 대한 로컬 변수를 설정할 수도 있습니다. >이상. index는 현재 루프 인덱스를 반환하고 다른 값은 값이 true인지 false인지 나타내는 부울을 제공합니다. 예를 들어:

<ul>
  <li *ngFor="let user of users; let i = index; let odd = odd"
      [class.odd]="odd">
    {{i + 1}}. {{ user.name }}
  </li>
</ul>

다음 마크업을 생성합니다.

<ul>
  <li>1. Al Dente</li>
  <li class="odd">2. D. Liver</li>
  <li>3. Pepe Roni</li>
</ul>