コース: Angular 2 基本講座

今すぐコースを受講しましょう

今すぐ登録して、24,800件以上登録されている、業界エキスパート指導のコースを受講しましょう。

ディレクティブで定めた条件により要素をつくる

ディレクティブで定めた条件により要素をつくる

コース: Angular 2 基本講座

1ヶ月の無料トライアルを開始 法人向けサービス

ディレクティブで定めた条件により要素をつくる

“

このレッスンではテンプレートの 要素を作るかどうか 条件によって変更するという やり方についてご説明をします。 今開いているコンポーネントなんですけれど 複数のデータが配列に入っています。 これはプロパティの heroines という 中に設定されているんですけど ng4 のディレクティブで １件ずつデータをとってきて それに応じて、この li 要素を データの数だけ作るということにしています。 そして li 要素をクリックした時 onSelect というコールバック あるいはハンドラーと呼ばれますけれど 関数を呼び出します。 そしてそのクリックした項目のデータが 入ったオブジェクトを引数に渡しています。 こちらがそのメソッドですね、 コールバックのメソッドなんですが 受け取ったオブジェクト、 データの入ったオブジェクトを selectedHeroine という プロパティに設定しています。 そしてそのプロパティの値は 今度はリストの下にある ラベルや input の要素に対して id と name という プロパティの値を表示する という形になっています。 ただしクリックしないと 値が設定されていない ということになって エラーになってしまいますので 初期値を与えています。 初期値はこの上のデータですね、 その一番先頭の 項目ということにしてあります。 ではビルドして確認しましょう。 ショートカット Ctrl もしくは Command+Shift+B でビルドです。 JavaScript のファイルは 出来上がったら「デバッグ」で 「デバッグ開始」 Function ５番ですね。 リストが１０件分あり、その下に 最初の項目 が表示されていますね。 そしてクリックする項目を変えれば 表示される項目は変わると あるいはこちらでデータバインディング されていますので データを変更すると、リストの 名前が変わってくる ということになっています。 けれども最初に先頭の ものを表示するというのではなくて クリックする前は何も表示せず、 クリックしたらその項目を表示する というふうにしたいと思います。 そのためにはクリックするまで 項目を作らないという 処理を加える必要があります。 テンプレートの要素を条件に応じて 作るか作らないかということを決めるには ディレクティブの…

目次