목록 및 세부 정보 보기

영웅 보기

이번에는 10명의 영웅의 데이터를 표시합니다.
데이터베이스 대신 새 파일을 만들어 영웅 정보를 작성합니다.

터미널

$ cd src/app
$ touch mock-heroes.ts

mock-heroes.ts

import {Hero} from './hero'

export const HEROES : Hero[] = [
    { id: 11, name: 'Dr 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' }
];

이 영웅의 데이터를 목록으로 표시하고 싶습니다.
이를 위해 먼저 ts 파일로 HTML에 표시하기위한 속성을 만들어갑니다.

heroes.component.ts

  heroes = HEROES;//これを追加する

하지만 heroes 속성에는 배열로 영웅의 데이터가 저장되어 있으므로 Angular for 문을 사용하여 영웅의 데이터를 각각 표시합니다.

heroes.component.html

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes">//ここがfor文
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

ts파일로 정의한 heroes 를 hero 라는 변수를 만들어 대입해 나갑니다.


이렇게 영웅 목록이 생겼습니다.

클릭 시 세부정보 보기

그런 다음 클릭한 영웅의 세부정보를 확인합니다.

heroes.component.html

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

li 태그에 클릭 이벤트를 추가합니다.
이렇게 하면 클릭 시 onSelect(hero) 식, 즉 함수적인 것이 발동됩니다. 이 함수를 ts 파일로 정의합니다.

heroes.component.ts

export class HeroesComponent implements OnInit {

  heroes = HEROES;
  selectedHero: Hero;//ここを追加

  constructor() { }

  ngOnInit() {
  }

  onSelect(hero: Hero): void {//ここを追加
    this.selectedHero = hero;
  }

}

이렇게 클릭된 영웅의 데이터가 selectHero에 저장됩니다.
그런 다음 세부 정보를 표시하는 HTML 파일을 만듭니다.

heroes.component.html

<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>

리스트 부분 아래에 이것을 기술합니다.
여기서 *ngIf는 Angular if 문입니다. 이 코드에서이 if 문이 없으면 오류가 발생합니다.


실제로 클릭해 보면 영웅의 세부 정보가 이와 같이 표시됩니다.

CSS 정돈

클릭 등을 알기 쉽게합니다.
우선 html 파일에 클래스 바인딩을 기술해 갑니다.
li 태그를 다음과 같이 변경합니다.

heroes.component.html

<li *ngFor="let hero of heroes"
  [class.selected]="hero === selectedHero"
  (click)="onSelect(hero)">

이제 hero === selectedHero , 즉 클릭되었을 때 class=selected 가 됩니다.
hero 컴포넌트 독자적인 CSS 파일에 기술해 갑니다.

heroes.component.css

/* HeroesComponent's private CSS styles */
.heroes {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 15em;
}
.heroes li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #EEE;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
}
.heroes li:hover {
  color: #607D8B;
  background-color: #DDD;
  left: .1em;
}
.heroes li.selected {
  background-color: #CFD8DC;
  color: white;
}
.heroes li.selected:hover {
  background-color: #BBD8DC;
  color: white;
}
.heroes .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color:#405061;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
}

영웅의 목록과 세부 정보를 볼 수 있습니다.