目次
ヒーローリストを表示しよう！
Tour of Heroesアプリにお抱えのヒーローたちを表示し、ヒーローを選択し、ヒーローの詳細情報を表示できるようにします。
この記事の最後にはこんなアプリができていることでしょう！
お抱えヒーローを作成する（MOCK）
あなたにはヒーロー達が必要です。
最終的には、リモートデータサーバーからそれらを取得します。今のところ、ヒーローリストを作成し、それらがサーバーから来たというていでやってみましょう。
src / app /フォルダーにmock-heroes.tsというファイルを作成します。 HEROES定数を10人のヒーローの配列として定義し、エクスポートします。ファイルは次のようになります。
名前は自由に変えてみてもいいでしょう。
ヒーローを表示する
HeroesComponentの上部にヒーローのリストを表示してみましょう。
HeroesComponentクラスファイルを開き、HEROESをインポートします。
import { HEROES } from '../mock-heroes';
これらのヒーローをバインドするためのヒーロープロパティをクラスに追加します。
heroes = HEROES;
*ngForでヒーローを一覧表示する
HeroesComponentテンプレートファイルを開き、次のように変更します：
合わせてスタイルも変更します。
次のようになります。
*ngFor はAngularのリピータ指令です。リスト内の各要素のホスト要素を繰り返します。
この例では、
- <li>がホスト要素
- heroesがHeroesComponentクラスのリスト
- ヒーローにはリスト内で繰り返されるの現在のヒーローオブジェクトを保持
つまり、*ngFor=”let hero of heroes” の一回目のheroオブジェクトにはヒーローリストの一番最初に格納されている{ id: 11, name: ‘Mr. Nice’ }が格納されます。
これがリスト分繰り返されるということです。
スコープスタイル
Angularではコンポーネントごとにスタイルシートを指定することができます。heroes.component.tsは@Componentデコレータをみると分かるようにheroes.component.cssと対応しています。
このheroes.component.cssは他のコンポーネントには干渉せずにheroes.component.tsにだけ適用します。複数のCSSファイルで同じクラス名のスタイルを設定してもそれらが干渉することはありません。
複数のコンポーネントにスタイルを指定したいときはグローバルCSSに、それぞれのコンポーネントに指定したいときはそれぞれのCSSで指定するといいでしょう。
詳細データを表示してみよう！
リストのヒーローをクリックしたら、ページの下部に選択したヒーローの詳細を表示するようにしてみましょう。
このセクションでは、ヒーローアイテムのクリックイベントからヒーローの詳細情報を更新します。
クリックイベントバインディングを追加する
クリックイベントバインディングを<li>タグに次のように追加します。
*ngFor="let hero of heroes" (click)="onSelect(hero)">
これは、Angularのイベントバインディング構文の例です。
<li>要素のクリックイベントを受け取るようAngularに指示します。<li>をクリックすると、Angularは対応するtsファイルのonSelect(hero)を実行します。
クリックイベントハンドラを追加する
コンポーネントのヒーロープロパティの名前をselectedHeroに変更しますが、初期値は割り当てません。
次のonSelect()メソッドを追加します。このメソッドは、クリックされたヒーローをコンポーネントのselectedHeroに割り当てます。
selectedHero: Hero;
onSelect(hero: Hero): void {this.selectedHero = hero;}
詳細情報テンプレートを更新する
テンプレートは、もはや存在しないコンポーネントの古いヒーロープロパティを参照します。ヒーローの名前をselectedHeroに変更します。
ですが、selectedHeroには選択するまで何も格納されておらず、nameプロパティも設定されていません。この状態でselectedHero.nameを参照するとエラーになります。何もありませんから。それを防ぐために*ngIfを使います。
ここまでのテンプレートは次の通りです。
ブラウザが更新されると、名前の一覧が再表示されます。詳細領域は空白です。ヒーローをクリックするとその詳細が表示されます。
*ngIf ?
selectedHeroが未定義の場合、ngIfはDOMからngIfの中の要素を削除します。
ユーザーがヒーローを選んだら、selectedHeroは値を持ち、ngIfはngIfの中の要素をDOMに入れます。
選択されたヒーローをわかりやすく！
すべての<li>要素が同じように見えるので選択後に、リスト内の選択されたヒーローを識別することは困難です。
ユーザーが「Magneta」をクリックすると、ヒーローは次のような背景色を変更し、レンダリングする必要があります。
選択された主人公の色付けは、以前cssに追加したスタイルの.selected CSSクラスで指定しています。 .selectedクラスをユーザーがクリックすると<li>に適用するようにしましょう。
Angularクラスバインディングを使用すると、条件付きでCSSクラスの追加や削除が容易になります。スタイルを設定する要素に[class.selected]="hero === selectedHero"を追加してください。.
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">のheroとselectedHeroが同じ場合、Angularは.selectedをclassに追加します。異なる場合、Angularはclassに追加しません。
ヒーローリストと詳細情報完成！
これでお抱えヒーローリストの表示と、詳細情報表示、そして編集ができるようになりました。
最終的なコードの確認は公式をご覧ください。