コース: Angular 2 基本講座
今すぐ登録して、25,300件以上登録されている、業界エキスパート指導のコースを受講しましょう。
コンポーネントのプロパティ値を要素のテキストに差し込む
このレッスンではコンポーネントに プロパティを定めて その値をデータバインディングで 要素のテキストとして表示したいと思います。 今簡単なデータバインディングが すでにあるんですが ちょっと書き換えましょう。 まずはプロパティを変更します。 １つは title という プロパティにします。 文字列です。 ここにはタイトルとして表示したい 文字を入れるんですけれど 「ヒロイン一覧」としましょう。 それから name は ヒロインということですから heroine にしましょう。 そして値もヒロインの名前ということで 例えば「シータ」ですね。 としておきます。 テンプレートの方も 書き換えましょう。 テンプレートで Hello になっていますが h1 要素として差し込まれる部分ですけど ここは title にしましょう。 そしてプロパティが もう１個加わりましたので 今度は h2 の要素で やはりデータバインディングを使いましょう。 波括弧２つですね。 そして タイプミスをしないように コピーしましょうか。 コピーして 貼り付けです。 そして、文字を付け加えます。 の情報と いうことで 付け加えました。 ではファイルを保存します。 ビルドをして確かめましょう。 ショートカットは Ctrl もしくは Command+Shift+ ビルドの B ということで くるくる回ってるのが止まると ビルドされた JavaScript が 表示されます。 ではデバッグのビューに切り替えて デバッグで確かめましょう。 ショートカットはデバッグの開始、 Function ５番です。 「ヒロイン一覧」というタイトルと ヒロインの名前ですね、 の情報ということで データバインディングが行われました。 デバッグのモードは停止しましょう。 ショートカットは Shift に Function の５番です。 エクスプローラーに 切り替えます。 このレッスンではコンポーネントに 新たにプロパティを ２つ定めて、それをテンプレートの中で データバインディング 波括弧２つですね。 で参照して、要素の中に テキストとして表示する という方法についてご説明をしました。
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。