Angular의 for 디렉티브

다음과 같은 배열이 있다고 가정해 봅시다:

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

템플릿 파일에서 반복문을 사용하여 이 배열을 순회해 보겠습니다. 이를 위해 *ngFor 디렉티브가 사용됩니다. 이 디렉티브는 배열을 순회하며 각 요소를 별도의 태그로 출력할 수 있습니다.

먼저 이 디렉티브를 가져와야 합니다:

app/app.component.tsimport {NgFor} from "@angular/common";

그리고 데코레이터의 imports 섹션에 추가합니다:

app/app.component.ts@Component({
  .....
  imports: [....., NgFor],
  ....
})

이제 사용할 수 있습니다. 어떻게 하는지 살펴보겠습니다. ul 목록이 있다고 가정합니다:

app/app.component.html<ul>
  
</ul>

우리 배열이 반복문으로 순회되며 각 요소가 li 태그 안에 출력되도록 만들어 봅시다. 다음과 같이 할 수 있습니다:

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

app/app.component.tsexport class AppComponent {
  public arr: number[] = [1, 2, 3, 4, 5];
}