コース: Angular 2 基本講座
今すぐ登録して、24,900件以上登録されている、業界エキスパート指導のコースを受講しましょう。
コンポーネントのプロパティ値をオブジェクトに改める
このレッスンでは、コンポーネントに クラスを新たに加えて プロパティをそのオブジェクトで 定めたいと思います。 今 Visual Studio Code で コンポーネントのモジュール app.component を 開いています。 ここで heroine という プロパティがあるんですが 今、名前だけですけど ID を加えたいと思います。 そういう時には、また新たなプロパティを 加えるということもできますけど heroine の中の ID と名前と、 これはセットですよね。 そういった時には オブジェクトにしてしまえば そのセットのデータを まとめて扱うことができます。 この場合、どうするかというと まず簡単なのが この heroine というプロパティを オブジェクトで定めてしまうことです。 オブジェクトですから 波括弧ですね。 そして name という プロパティにして そこに文字列を与えておくと。 もう１つ ID を加えたいと思いますので ここで改行します。 こちらも改行して プロパティ id として 数値で１というふうにします。 カンマで区切ります。 これで一応 heroine という プロパティに id と name がセットになった オブジェクトが与えられました。 そしたら、ここで表示したいのは name の方を表示したいわけですから heroine のプロパティで .name とすれば良いわけですね。 では、ビルドして確認しましょう。 ビルドは、ショートカット Ctrl もしくは Command+Shift+ ビルドの B と。 くるくる回って止まると JavaScript が生成されました。 では、デバッグのモードで デバッグを開始します。 Function ５番が ショートカットです。 特に問題なく 名前が表示されていますね。 これで一応目的は 達成できたのですけど heroine をたくさん 扱いたいと思います。 その時に ID がなかったりとか あるいは ID があるんだけれど 中には文字列になっていたと こういった時に ちゃんとチェックをする仕組みが あると良いですね。 そういう時に、インターフェースを 定めるという方法もあるのですが 今回は、クラスを定めて 実際に値が入れられるという 形にしたいと思います。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。