6.0.0本稿は、複数のデータをテンプレートにもとづいてリスト表示し、マウスクリックでリスト項目が選べるようにします。編集ページをつくる」で書いたコードに手を加えてゆきましょう。データのモジュールを定める複数データは新たなモジュール(TypeScriptファイル)に、配列でconst宣言した定数に納めます。基本型」03「const宣言」参照)。基本型」04「配列」参照)。'フィオ'}];子コンポーネント(heroines.component)のTypeScriptファイルは、クラス(HeroinesComponent)から項目ひとつのプロパティ(heroine)は除いて、新たに加える複数データのプロパティ(heroines)に前掲モジュールの定数(HEROINES)を定めます。HEROINES;}}項目ひとつのプロパティ(heroine)がなくなってしまったので、子コンポーネント(heroines.component)のテンプレートは、ひとまず複数データのプロパティ(heroines)の最初の配列要素を項目データとして扱うことにします。これで、アプリケーションの動きはもとと変わらず、ページにははじめのデータが表示されるはずです。複数データをリスト表示する複数データのリストをアプリケーションのページに加えましょう。手直しするのは、データを表示する子コンポーネント(heroines.component)のテンプレートです。つぎのように、<li>要素にngForディレクティブを定めます(「NgForOf」参照)。このディレクティブは、リストのオブジェクト(heroines)からデータをひとつひとつ変数(let)に取り出し、ディレクティブが与えられた要素(<li>)をテンプレートにして差し込むのです。データがすべてリストとしてアプリケーションのページに加わることになります。{{heroine.name}}</li></ul>データを表示するコンポーネント(heroines.component)に、さらに以下のコード001でCSSスタイルを定めます。このCSSファイルは、テンプレートのHTMLファイルと同じく、このコンポーネントのみに適用されるのです。これで、複数データがアプリケーションのページにリスト表示されて、スタイルも与えられました(図001)。リスト項目にマウスポインタを重ねたとき(:hover擬似クラス)のスタイルも定められています。リストからクリックした項目のデータを編集するリストをクリックしたら、その項目が編集できるようにしましょう。値の文字列は、呼び出すクラスのメソッド(onSelect())です。引数には、クリックした要素のオブジェクト(heroine)を渡しました。--></li></ul>コンポーネント(heroines.component)のクラス(HeroinesComponent)に以下のようにメソッド(onSelect())を定めると、リストの項目をクリックしたとき呼び出され、その項目のオブジェクトが引数(heroine)に渡されて、クラスのプロパティ(selectedHeroine)に与えられます。console.log()メソッドを加えましたので、クリックした項目のデータはたとえばつぎのようにブラウザのコンソールで確かめられるでしょう。確認用}}クリックした項目のオブジェクトはデータ表示のコンポーネント(heroines.component)のプロパティ(selectedHeroine)に与えられましたので、テンプレートでつぎのようにデータを編集する要素にバインディングすれば値が書き替えられるはずです。placeholder="名前"></label></div>ところが、アプリケーションをブラウザで開くと、項目がリスト表示されず、コンソールにはつぎのようなエラーが示されます(図002)。テキストが表示されていないリスト項目のどれかをクリックすれば、アプリケーションは動き始めるのです。undefined図002■アプリケーションをブラウザで開くと項目がリスト表示されないこのエラーは、リストの項目をクリックしないと、プロパティ(selectedHeroine)の値が空で、リストの下の編集項目に番号と名前が表示できないからです。したがって、たとえばつぎのように初期値を与えれば、エラーが避けられます。リストの最初の項目が初期値になる}けれど、予め選択を決めたくない場合もあります。今回は、リスト項目をクリックしてはじめて編集項目のデータが示されるようにします。そのときに使うのが、ngIfディレクティブです(NgIfディレクティブ)。値に定めた文字列の条件がtrueと評価されなければ、ディレクティブを定めた要素のノードはつくられません。そこで、つぎのようにngIfディレクティブが加えられた要素(<div>)で編集項目を包みます(ディレクティブに添えたアスタリスク*はその要素がテンプレートになることを示します)。これで、はじめリストの下には何もなく、リスト項目をクリックするとデータが示されます。クリックした項目のスタイルを変える前掲コード002のCSSには、選択したリスト項目のスタイルもクラス(selected)として定められています。