영웅 목록 보기

영웅 모의 만들기

mock-heroes.ts 파일을 src/app/폴더 아래에 만듭니다.

영웅 보기

여기서하고 싶은 것은 HeroesComponent에서 mock-heroes.ts에서 선언 한 영웅들의 목록을 표시하는 것입니다.
또한, 여기까지의 튜토리얼로 파일명이 바뀌고 있으므로 주의해 주세요.
src/app/heroes/heroes.component.ts는 src\components\heroes\heroes.ts입니다.
아래와 같이 변경합니다.


HTML 측은 아래와 같이 합니다.


어쩐지 보면 알겠지만,
* ngFor는 템플릿 엔진의 반복 구문과 같으며,
="let hero of heroes"부분이 구체적으로 무엇을 기반으로 반복이 이루어지는지의 정의입니다.
여기에서는 heroes의 각 요소를 hero라는 이름으로 반복합니다.
따라서 그 아래에있는 요소의 hero.id와 hero.name은 각 영웅의 id와 name이됩니다.

실제로 움직이면 이런 느낌입니다.

영웅 장식

여기서는 CSS를 사용하여 Hero의 List를 장식해 보겠습니다.
애플리케이션 전체에 적용되는 CSS는 styles.css(app.scss)에서 정의했습니다.
heroes 구성 요소에서만 적용하려는 CSS는 src\components\heroes\heroes.scss에 설명되어 있습니다.
( @Component .styles 안에 인라인으로 정의하는 것도 가능합니다만, 위와 같이 하는 편이 컴퍼넌트의 재이용성이 높아집니다.)

지난번 에서 쓴 것처럼 styleUrls는 쓰지 않았지만 별로 신경 쓰지 마십시오.

Master/Detail

클릭 이벤트 바인딩 추가

클릭 시 이벤트를 설정해 봅시다.
먼저 html을 편집합니다.

이제 클릭시 이벤트로 onSelect 메서드를 인수에 hero를 주어 호출하도록 했습니다.
아래와 같이 onSelect 메소드를 작성해 봅시다.

보면 알 수 있지만 onSelect는 클래스 변수 selectedHero에 값을 설정하는 setter와 같은 메서드입니다.
그래서 selectedHero에는 화면상에서 클릭한 hero(의 객체)가 들어가게 됩니다.
그럼, 실제로 selectedHero(화면상에서 선택된 히어로)를 바탕으로 화면 표시를 실시하도록(듯이) 바꾸어 봅시다.
HTML을 아래와 같이 편집해 보세요.


*ngIf="selectedHero"는 ngFor와 마찬가지로 템플릿 엔진에서 사용할 수 있는 If 같은 것입니다.
이 경우 selectedHero가 초기 상태이면 undefined임을 고려합니다.
(없으면 selectedHero.name 등으로 오류가 발생합니다)

화면은 아래와 같아야합니다.

선택한 영웅을 장식

이대로는, 어느 히어로가 선택되었는지가 퍼트 보기에서는 알기 어려운 상태입니다.
선택하면 강조 표시해 봅시다.
HTML을 아래와 같이 수정해 보세요.

또, 컴퍼넌트의 CSS에는 튜토리얼에 있도록(듯이) 써 두고 싶었습니다만, 그대로 쓰면 그다지 잘 안 되는 표시가 되었으므로, 적당하게 바꾸어 둡니다.


이런 느낌으로 나타났습니다. (튜토리얼은 더 예쁘게 표시될 것입니다만….)