2. display a data | 풀스택개발 EastFlag

*ngFor 반복문

mock heroes 생성

http로 데이터 모델을 생성하는게 일반적이지만 그 부분은 나중에 다뤄보기로 하고 여기서는 임의의 mock 데이터 모델을 생성한다.

import { Hero } from './hero';

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

import { Hero } from './hero';

export const HEROES: Hero[] = [

{ id: 11, name: 'Mr. Nice' },

{ id: 12, name: 'Narco' },

{ id: 13, name: 'Bombasto' },

{ id: 14, name: 'Celeritas' },

{ id: 15, name: 'Magneta' },

{ id: 16, name: 'RubberMan' },

{ id: 17, name: 'Dynama' },

{ id: 18, name: 'Dr IQ' },

{ id: 19, name: 'Magma' },

{ id: 20, name: 'Tornado' }

];

이제 이 mock 데이터를 heroes 컴포넌트에 할당한다.

heroes = HEROES;

1	heroes = HEROES;

view에 바인딩한다. 같은 데이터를 여러번 반복하기위해 *ngFor 를 사용한다. let ~ of 반복문은 es6에 새로나온 방법이다. 기존 for ~ in 반복문은 배열의 인덱스 혹은 객체의 키값을 가져오는 방법이나 let ~ of 는 해당 컬렉션을 반복한다.

<h2>My Heroes</h2>
<ul>
  <li *ngFor="let hero of heroes">
    <span>{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<h2>My Heroes</h2>

<ul>

<span>{{hero.id}}</span> {{hero.name}}

</li>

</ul>

master/detail 구조 만들기

리스트를 클릭하면 상세화면이 하단에 나타나도록 만들자. 클릭 이벤트를 추가한다.

오른쪽이 true가 되면 class=”selected” 가 렌더링 된다. false가 되면 아무것도 렌더링 되지 않는다.

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

1	<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

클릭하면 selectedHero 변수에 선택된 객체를 담는다.

selectedHero: Hero;

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

selectedHero: Hero;

onSelect(hero: Hero): void {

this.selectedHero = hero;

}

템플릿 하단에 상세화면을 추가한다.

<h2>{{ selectedHero.name | uppercase }} Details</h2>
<div><span>id: </span>{{selectedHero.id}}</div>
<div>
  <label>name:
    <input [(ngModel)]="selectedHero.name" placeholder="name">
  </label>
</div>

<h2>{{ selectedHero.name | uppercase }} Details</h2>

<div><span>id: </span>{{selectedHero.id}}</div>

<div>

<label>name:

</label>

</div>

*ngIf 로 dom 감추기

<div *ngIf="selectedHero">

  <h2>{{ selectedHero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name">
    </label>
  </div>

</div>

<h2>{{ selectedHero.name | uppercase }} Details</h2>

<div><span>id: </span>{{selectedHero.id}}</div>

<div>

<label>name:

</label>

</div>

input box를 수정할때 detail 영역뿐만 아니라 list 쪽도 수정이 된다는것에 유념하자.

Bootstrap 으로 style 하기

기본 스타일을 scss로 변경하기

angular.json에 styles를 src/styles.scss 로 변경하고 해당 화일명도 변경한다.

angular-cli에서 컴포넌트 생성할때 기본 css화일을 scss로 변경하기

angular.json에 schematics를 적용한다.

      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },

"schematics": {

"@schematics/angular:component": {

"styleext": "scss"

}

bootstrap 적용하기

bootstrap4가 2018년 초에 정식 버전이 release 되었다. bootstrap3에 비해서 가장 크게 달라진점은 CSS3에 도입된 flex layout이다. 설치해보자.

npm install --save bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

npm install --save bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

style.scss에 bootstrap 스타일을 import한다.

@import "../node_modules/bootstrap/dist/css/bootstrap.css";

1	@import "../node_modules/bootstrap/dist/css/bootstrap.css";

bootstrap으로 스타일하기

d-flex는 flex layout을 적용한다.

p-2는 0.5rem 패딩을 적용한다. bg-primary와 text-light는 각각 배경색과 글자색을 지정한다.

<h2>My Heroes</h2>
<ul>
  <li class="d-flex m-1" *ngFor="let hero of heroes" (click)="onSelect(hero)">
    <span class="rounded-left p-2 bg-primary text-light">{{hero.id}}</span>
    <div class="rounded-right p-2 bg-light text-dark w-50">{{hero.name}}</div>
  </li>
</ul>

<h2>My Heroes</h2>

<ul>

</li>

</ul>

선택된 열 style 하기 – class 바인딩 이용

선택을 하면 해당 li에 selected 라는 클래스를 클래스 바인딩 문법을 이용하여 삽입한다.

[class.selected]="hero===selectedHero"

1	[class.selected]="hero===selectedHero"

selected 클래스에 대해서 배경색과 글자색을 다르게 설정한다.

li {
  .bg-light {
    background-color: #cccccc !important;
  }
  &.selected {
    div {
      &.bg-light {
        background-color: #666666 !important;
      }
      &.text-dark {
        color: white !important;
      }
    }
  }
}

li {

.bg-light {

background-color: #cccccc !important;

}

&.selected {

div {

&.bg-light {

background-color: #666666 !important;

}

&.text-dark {

color: white !important;

}

여기서는 scss로 작성하였다. css 에는 없는 네스팅 구조를 이용하여 트리형태로 구성하였고, & 부모참조 연산자를 사용하였다. &selected 라고 하게 되면 자식이 아니라 부모를 직접 참조하게 된다.

로드 중…