[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 5. ngFor

[ Ionic3 / 아이오닉3 ] Angular부터 시작하자 5. ngFor

자.. 이번에는 for문이다

컴포넌트를 하나 생성하도록 한다

ng generate component greeting

그 다음

app/app.component.html로 가서

새로 추가된 app-greeting을 추가한다

성공했다면 아래와 같은 화면을 볼 수 있다.

그 다음

app/greeting/greeting.component.ts로 가서

names: string[] = ["Twoway","Greeting","JSON","Angular","Ionic"]; 를 추가한다

names라는 array에 5개 값을 넣어줬다

그런다음

app/greeting/greeting.component.html로 가서

<div>

  <ul>

    <li *ngFor="let name of names">{{name}}</li>

  </ul>

</div>

라고 입력을 한다

그러면 아래와 같이 나올것이다

ngFor로 names array를 불러 name이라는것을 출력하도록

*ngFor=" let name of names" 와 같이 선언했는데

name이라는 것은 어디에도 없다

angular가 기가막히게 바인딩을 해서 name이라는 정의가 없음에도 잘 출력이 되도록 결과가 나온것이다 

그러면 데이터 타입을 약간 변경 해볼까

names 안에 name으로 넣어서

names: [{name: string}] = [{name: "Twoway"},{name: "Greeting"},{name: "JSON"},{name: "Angular"},{name: "Ionic"}];]

이렇게 하면?

ㅈ...즈기요?

어찌된 영문일까.............

json으로 확인하도록 한다

보이는것 처럼 name: 이름 으로 잘 들어가 있는데..

그러하다

let name of name에서 name과 바인딩이 되는 해당 array의 인덱스가 가르키는 값이 {name: "Twoway"}이고

그 인덱스(name)의 name값을 뽑아야 하니 name.name으로 해야 위 처럼 잘 나온다

name name 하지말고 조금더 가독성이 있도록 이름을 쪼까 바꿔주도록 하자

그러면 names라는 array에서 person(인덱스)를 ngFor하는데 그 값들을 하나하나 Hello {{person.name}} 하도록 한다

자 이번시간은 여기까지

다음 포스팅 에서는 component간 communication에 대해서 알아보도록 하자