前回の投稿Angluar2のクイックスタートとチュートリアルを実施 - その2の続きです。
前回作成したソースを使用します。

本投稿の参照元(英語)

(バージョンが異なりますが、大きな影響はないと思います。)
Master/Detail - ts

本章で学ぶこと

以下を学習します。

選択可能なヒーローの一覧を表示する
一覧選択時(クリック時)ヒーローの詳細を表示する
ディレクティブngForとngIfの使い方

実行結果

本章を完了すると以下リンク先のようなものが出来上がります。
ヒーローのリストを表示し、選択(クリック)すると、下に詳細が表示されます。
live-examples

事前準備

以下のコマンドによりサーバの起動を行います。プログラムの変更が即座にブラウザに反映されます。(サーバを落としていなければ不要です。)

cd angular2-tour-of-heroes
npm start

ヒーローの一覧表示

ヒーローの作成

ヒーロークラスの定数配列HEROESを追加します。
(ヒーロークラスは、id,nameのプロパティを持ちます。)
※データはサービスから取得すべきですが、あくまでもモックなのでソースに直書きします。後の章で変更します。

app/app.component.ts

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' }
];

ヒーロー配列の公開

AppComponentクラスのプロパティを、先ほど定義した定数配列HEROESを使用するため、以下の通り変更します。

app/app.component.tsのAppComponentクラス

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
}

ngForを使用したヒーロー表示

ヒーロー名Windstormのみを表示する状態から、ヒーローの一覧を表示するために、app.component.tsのhtmlテンプレート部分を修正します。

app/app.component.tsの@Componentデコレータのtemplate

  <h1>{{title}}</h1>
  <ul class="heroes">
    <li *ngFor="let hero of heroes">
     <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </ul>

heroes配列をhtmlテンプレートに表示したい場合、テンプレートで*ngForを使用します。
let hero of heroesにより、heroes配列の要素数分、ローカル変数heroに値が格納され、<li>タグ及び内包のタグが動的に生成されます。

ngForのアスタリスク*は必要です。
ngForについては以下を参照願います。
Displaying Data(英語)
Template Syntax(英語)

これにより、ブラウザ上にヒーローの一覧がリスト表示されます。(表示されない場合更新してください。)

スタイルの追加

htmlテンプレートのスタイルは、cssのほか、@Componentデコレータ内にStyles属性を追加することでも変更できます。htmlとcssを1対1で定義しているため、cssの内容が他のhtmlに影響を与えることはありません。
ここでは、マウスカーソルがホーバーしたときとクリックしたときに見た目を変更する定義を行っています。

cssについての一般的な知識は以下を参照ください。
いまさら聞けないCSS／スタイルシート入門（1）@IT

app/app.component.tsの@Componentデコレータ


styles: [`
  .selected {
    background-color: #CFD8DC !important;
    color: white;
  }
  .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.selected:hover {
    background-color: #BBD8DC !important;
    color: white;
  }
  .heroes li:hover {
    color: #607D8B;
    background-color: #DDD;
    left: .1em;
  }
  .heroes .text {
    position: relative;
    top: -3px;
  }
  .heroes .badge {
    display: inline-block;
    font-size: small;
    color: white;
    padding: 0.8em 0.7em 0 0.7em;
    background-color: #607D8B;
    line-height: 1em;
    position: relative;
    left: -1px;
    top: -4px;
    height: 1.8em;
    margin-right: .8em;
    border-radius: 4px 0 0 4px;
  }
`]

ヒーローを選択する

「マスター/ディテール」のUIパターンにより、マスター(ヒーローの一覧)からディテール(ヒーローの詳細)を選択できるようにします。

クリックイベント

<li>タグに(click)を追加し、クリックイベントをバインドします。(Javascript標準の.onClickではありません。)

app/app.component.tsの@Componentデコレータ内template

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

これにより<li>タグ内のクリック時に、後ほどAppComponentクラスで定義するonSelect()メソッドが呼ばれます。このとき選択したHeroクラスがonSelectメソッドへの引数になります。このheroは、ngForでイテレートされたheroes配列の要素です。

クリックハンドラ(`onSelect()`メソッド)の追加

選択したヒーローを取得するために、AppComponentクラスにonSelect()メソッドを追加します。このメソッドは、ユーザがクリックしたヒーローをAppComponentクラスのselectedHeroプロパティとして取得します。
AppComponentクラスを以下の通り変更します。

app/app.component.tsのAppComponentクラス

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;

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

次に、以前作成したテキストボックスに、selectedHeroプロパティの値を出力します。
onSelect()メソッドで取得したseletedHeroプロパティをhtmlテンプレートで使用します。

app/app.component.tsの@Componentデコレータ内テンプレート


<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
  <label>name: </label>
  <input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>

未選択時のヒーロー詳細を隠す

ヒーローを選択していない場合、テキストボックスを表示しないようにします。これは、selectedHero === undefinedの場合です。
ngIfディレクティブによる条件判定により、それを実現します。

app/app.component.tsの@Componentデコレータ内テンプレート

<h1>{{title}}</h1>
<ul class="heroes">
    <li *ngFor="let hero of heroes">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </ul>
  <div *ngIf="selectedHero">
    <h2>{{selectedHero.name}} details!</h2>
    <div><label>id: </label>{{selectedHero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="selectedHero.name" placeholder="name"/>
    </div>
  </div>

ngIfの前のアスタリスク(*)は必須です。

ngForやngIfはストラクチュアルディレクティブ(構造上のディレクティブ structural directives)と呼ばれます。これはDOMの一部の構造を変更するためです。
その他ストラクチュアルディレクティブについては以下を参照してください。
Structural Directives(英語)
Template Syntax(英語)

本項により選択したヒーローの詳細情報が、ヒーローの一覧の下に表示されるようになります。

選択したヒーローのスタイル

選択したヒーローを分かりやすくするためにスタイル(見た目)を変更したい場合、先ほどstylesに追加したクラスセレクタ.selectedを使用するため、ヒーローの一覧の<li>タグにプロパティバインディングclass.selectedを追加します。

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

これはイテレータにより取得する変数heroと現在選択中のselectedHeroが一致する場合CSSのクラスセレクタ .selectedを適用し、一致しない場合適用を解除します。

Angular2のプロパティバインディングについては以下を参照ください。
property bindings(英語)

本章により、app/app.component.tsは以下のようになります。