[AngularJS 2.0] #기초 :: *ngFor 이해하기

[AngularJS 2.0] #기초 :: *ngFor 이해하기

---

이번 글에서는, AngularJS 기초 개념 중 *ngFor에 대해서  공식페이지에서 제공하는 내용을 바탕으로 살펴보려고 한다. 

＿

*ngFor 를 활용하여 배열의 속성을 보여주기 [Showing an array property with *ngFor]

- 목적 또는 상황 : 한 명의  hero  정보가 아닌, 여러  hero 의 정보가 배열 형태로 담겨있는  hero list 의 내용을 화면에 표현하고자 한다.

 (예제 작성을 위해서) 임의의 hero name이 들어있는 배열을 Component 에 추가한다.

임의의  heroes  이름이 들어있는 배열의위치는  myHero  의 바로 위 이며, myHero  도  hero  이름 배열의 첫 번째 원소로 지정 해준다.

export class AppComponent{
  title = 'Tour of Heroes';
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  myHero = this.heroes[0];
}

이제 다음으로, heroes 리스트의 각 아이템을 화면에 표시하기위해,  Angular의 ngFor "repeater" 지시자(directive)를 template 안에서 사용한다.

  template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    <p>Heroes:</p>
    <ul>
      <li *ngFor="let hero of heroes">
        {{ hero }}
      </li>
    </ul>
  `

Our presentation is the familiar HTML unordered list with<ul> and <li> tags. Let's focus on the <li> tag.

<li *ngFor = "let hero of heroes">
  {{ hero }}
</li>

We added a somewhat mysterious *ngFor to the <li>element. That's the Angular "repeater" directive. Its presence on the <li> tag marks that <li> element (and its children) as the "repeater template".