ヒーローのリストを表示する
ヒーローのモックを作成する
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に値をセットするセッターのようなメソッドです。
なので、selectedHeroには画面上でクリックしたhero(のオブジェクト)が入ることになります。
では、実際にselectedHero(画面上で選択されたヒーロー)を元に画面表示を行うように変えてみましょう。
htmlを下記のように編集してみてください。
*ngIf="selectedHero"はngForと同様にテンプレートエンジンで使えるIfみたいなものです。
この場合は、selectedHeroが初期状態だとundefinedであることを考慮しています。
(無いとselectedHero.nameなどでエラーになってしまう)
画面は下記のようになるはずです。
選択されたヒーローを装飾する
このままでは、どのヒーローが選択されたかがパット見ではわかりにくい状態です。
選択された場合は強調表示するようにしてみましょう。
htmlを下記のように修正してみてください。
また、コンポーネントのCSSにはチュートリアルにあるように書いておきたかったのですが、そのまま書いたらあんまりよろしくない表示になっったので、適当に変えておきます。
こんな感じに表示されました。(チュートリアルはもっときれいに表示されるんはずなんですが…。)
