Angular 2-データ表示

Angular JSでは、クラスのプロパティの値をHTMLフォームで非常に簡単に表示できます。

例を見て、データ表示について詳しく理解しましょう。この例では、クラスのさまざまなプロパティの値をHTMLページに表示します。

ステップ1 *-app.component.tsファイルのコードを次のように変更します。

import {
   Component
} from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.componentl'
})

export class AppComponent {
   TutorialName: string = 'Angular JS2';
   appList: string[] = ["Binding", "Display", "Services"];
}

上記のコードについて、次の点に注意する必要があります。

文字列型のappListという配列を定義しています。
Binding、Display、およびServicesである配列の一部として3つの文字列要素を定義しています。
また、Angular 2の値を持つTutorialNameというプロパティを定義しました。

ステップ2 *-テンプレートファイルであるapp/app.componentlファイルに次の変更を加えます。

<div>
   The name of this Tutorial is {{TutorialName}}<br>
   The first Topic is {{appList[0]}}<br>
   The second Topic is {{appList[1]}}<br>
   The third Topic is {{appList[2]}}<br>
</div>

上記のコードについて、次の点に注意する必要があります。

TutorialNameプロパティを参照して、「HTMLページでのチュートリアルの名前は何か」を伝えています。
配列の3つのトピックのそれぞれを表示するために、配列のインデックス値を使用しています。

ステップ3 *-すべてのコード変更を保存し、ブラウザを更新すると、以下の出力が得られます。出力から、クラスのプロパティの値に従ってデータが表示されていることがはっきりとわかります。

表示

その場でバインドする別の簡単な例は、入力htmlタグの使用です。データがhtmlタグに入力されると、データが表示されるだけです。

テンプレートファイルであるapp/app.componentlファイルに次の変更を加えます。

<div>
   <input [value] = "name" (input) = "name = $event.target.value">
   {{name}}
</div>

上記のコードについて、次の点に注意する必要があります。

[値] =”ユーザー名” -これは、式ユーザー名を入力要素の値プロパティにバインドするために使用されます。
*（input）=” expression” *-これは、入力要素の入力イベントに式をバインドする宣言的な方法です。
username = $ event.target.value -入力イベントが発生したときに実行される式。
$ event -イベントのペイロードの値を持つ、Angularによってイベントバインディングで公開される式。

すべてのコード変更を保存してブラウザを更新すると、次の出力が得られます。

更新

次に、「finddevguides」などの情報を入力ボックスに入力します。出力はそれに応じて変化します。

入力ボックス

Angular2-data-display

Angular 2-データ表示