選んだ項目をデータバインデングする

このレッスンでは、選んだ項目のデータを template の別の要素に バインディングします。 今開いているコンポーネント app.component のコードですが データが配列に入っています。 この配列ですね。 それをコンポーネントのクラスの プロパティに設定しているのですが こちらですね。 heroines とありますが この li 要素に ngFor のディレクティブが 設定されていまして この heroines の中に入っている データを１つ１つ取り出して この template を割り当てて リストにしているわけですね。 それが heroine という変数なのですが その id と name が、 この id と name ですね。 10 件分表示されると いうことになっています。 更に、その li 要素１つ１つのいずれかを クリックした場合 このディレクティブで onSelect という メソッドが呼び出されます。 そしてその li 要素のデータが入っている heroine のデータ、 heroine のオブジェクト、 この変数を渡していますので それがこの onSelect に渡る ということになります。 この onSelect の中では 渡されたオブジェクト heroine のデータを プロパティに定めて 確認のために console.log で 表示しています。 では、ブラウザで確認してみましょう。 10 人のヒロインのデータが リストされているので コンソールを出します。 ［開発 / 管理］＞ ［JavaScript コンソール］です。 「11 シータ」をクリックすると 11 シータ。 「15 さつき」クリックすると 「15 さつき」と クリックされた項目のデータを持った オブジェクトが取り出されています。 これをページの方に反映させましょう。 ページに反映しますから この確認用の console.log は 要らなくなりますので コメントアウトしておきましょう。 そして、どこに表示するかと言うと ここに以前テキスト入力フィールド input 要素で 番号と、それから名前を 「～の情報」と表示していたのですが これを復活させます。 ということで、このコメントの 記号は取ってしまいます。 一時的に怒られますが それはこの template…