2-3 영웅여행 마스터/디테일 분리

마스터/디테일(Master/Detail)

이번에는 영웅 목록을 보여주고, 뷰 탬플릿에 영웅을 추가하는 프로그램을 만들어 본다.

src/app/app.component.ts

import {Component} from '@angular/core';   export class Hero{   id: number;   name: string; }   @Component({   selector: 'app-root',   template:`   <h1>{{title}}</h1>   <h2>나의 영웅들</h2>   <ul class="heroes">     <li *ngFor="let hero of heroes"       [class.selected]="hero === selectedHero"       (click)="onSelect(hero)">       <span class="badge">{{hero.id}}</span>{{hero.name}}     </li>   </ul>   <div *ngIf="selectedHero">     <h2>{{selectedHero.name}} 내역!</h2>     <div><label>아이디 : </label>{{selectedHero.id}}</div>     <div>       <label>이름 : </label>       <div><input [(ngModel)]="selectedHero.name" placeholder="영웅이름"></div>     </div>   </div>   `,   styles:[`   .selected{     background-color: #CFD8DC !important;   }   .heroes{     margin: 0 0 2em 0;     list-style-type: none;     padding: 0;     width: 10em;   }   .heroes li {     cursor: pointer;     position: relative;     left: 0;     background-color: #EEE;     margin: .5em;     padding: .3em 0em;     height: 1.6em;     border-radius: 4px;   }   .heroes li:hover{     color: #607D8B;     background-color: #EEE;     left: .1em;   }   .heroes .text{     position: relative;     top: -3px;   }   .heroes .badge{     display: inline-block;     font-size: small;     color: white;     padding: 0.8em 0.7em 0em 0.7em;     background-color: #607D8B;     line-height:1em;     position: relative;     left: -1px;     top: -4px;     margin-right: .8em;     border-radius: 4px 0px 0px 4px;   }   `] }) export class AppComponent{   public title = '영웅여행';   heroes = HEROES;   selectedHero : Hero;   onSelect(hero:Hero) {     this.selectedHero = hero;   } }   var HEROES: Hero[] = [   { "id": 11, "name": "홍길동"},   { "id": 12, "name": "이순신"},   { "id": 13, "name": "수퍼맨"},   { "id": 14, "name": "배트맨"},   { "id": 15, "name": "로빈훗"},   { "id": 16, "name": "장보고"},   { "id": 17, "name": "을지문덕"},   { "id": 18, "name": "김유신"},   { "id": 19, "name": "간디"},   { "id": 20, "name": "강감찬"} ];

 

결과화면은 위와 같다.

이제 소스 내역들을 살펴보자

배열을 이용하여 영웅목록을 생성하였다.

var HEROES: Hero[] = [         { "id": 11, "name": "홍길동"},         { "id": 12, "name": "이순신"},         { "id": 13, "name": "수퍼맨"},         { "id": 14, "name": "배트맨"},         { "id": 15, "name": "로빈훗"},         { "id": 16, "name": "장보고"},         { "id": 17, "name": "을지문덕"},         { "id": 18, "name": "김유신"},         { "id": 19, "name": "간디"},         { "id": 20, "name": "강감찬"} ];

 

*ngFor, let변수

<li *ngFor="let hero of heroes">   <span class="badge">{{hero.id}}</span> {{hero.name}} </li>

<li>태크 내에서 Angular2 내장directive인 *ngFor를 이용하여 목록을 표기할 수 있다 이것은 for루프 문과 비슷하다. 위 내용은 heroes배열의 각각의 객체를 hero에 대입한다. <li>태크 내에서는 대입된 hero객체를 이용하여 id와 name을 화면에 표시한다.

<li *ngFor="let item of items;  let i = index">...</li>

 

*ngIf

1.  <div *ngIf="selectedHero"> 2.  <h2>{{selectedHero.name}} details!</h2> 3.  <div><label>id: </label>{{selectedHero.id}}</div> 4.  <div> 5.  <label>name: </label> 6.  <input [(ngModel)]="selectedHero.name" placeholder="name"/> 7.  </div> 8.  </div>

*ngIf는 if문과 비슷하다. 여기에서는 selectedHero에 값이 있을경우 div를 표시하라는 것이다.

 

*ngIf를 사용하지 않고 selectedHero에 대입된 객체가 없을경우에는 아래와 같은 오류가 난다.

EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]

 

@Component styles 메타데이타

styles:[`   .selected {     background-color: #CFD8DC !important;     color: white;   }   .heroes {     margin: 0 0 2em 0;     list-style-type: none;     padding: 0;     width: 10em;   }   .heroes li {     cursor: pointer;     position: relative;     left: 0;     background-color: #EEE;     margin: .5em;     padding: .3em 0em;     height: 1.6em;     border-radius: 4px;   }   .heroes li.selected:hover {     color: white;   }   .heroes li:hover {     color: #607D8B;     background-color: #EEE;     left: .1em;   }   .heroes .text {     position: relative;     top: -3px;   }   .heroes .badge {     display: inline-block;     font-size: small;     color: white;     padding: 0.8em 0.7em 0em 0.7em;     background-color: #607D8B;     line-height: 1em;     position: relative;     left: -1px;     top: -4px;     height: 1.8em;     margin-right: .8em;     border-radius: 4px 0px 0px 4px;   } `]

@Component데코레이터에 styles를 이용해서 CSS스타일을 적용할 수 있다. 여기에 적용된 스타일은 Component내에서만 적용된다.

(click) Event Binding

1.  <li *ngFor="#hero of heroes" (click)="onSelect(hero)"> 2.  <span class="badge">{{hero.id}}</span> {{hero.name}} 3.  </li>

(click)은 클릭했을 때 사용되는 함수를 선언해 준다. <li>태그를 화면에서 클릭할 때 AppComponent메소드인 onSelect가 호출된다.

onSelect(hero: Hero) { this.selectedHero = hero; }

onSelect메소드에서는 선택된 영웅을 selectedHero변수에 대입한다.

[class.selected] 스타일 적용

styles메타데이타에 selected클래스를 정의하였다. 수식 (hero === selectedHero)가 참일 경우 selected클래스스타일이 적용된다.

영웅목록에서 영웅을 선택하면 선택된 영웅의 바탕색이 바뀌어 있음을 확인할 수 있다.

<li *ngFor="let hero of heroes"   [class.selected]="hero === selectedHero"   (click)="onSelect(hero)">   <span class="badge">{{hero.id}}</span> {{hero.name}} </li>

 

[(ngModel)] Two Way Binding

위에서 Event Binding은 ()를 사용하고, Property Binding은 []를 사용한다고 설명하였다. Event Binding과 Property Binding둘 다 사용하고자 하면 [()]를 표시하는 Two Way Binding을 사용한다.

 

<input [(ngModel)]="selectedHero.name" placeholder="name"/>

이것은 ngModel의 값은 selectedHero.name의 값이며 이벤트가 발생할 때마다 값이 대입된다.

 

다른 표기법

<input [value]=" selectedHero.name " (input)=" selectedHero.name =$event.target.value" />