Angular 2-データバインディング

双方向バインディングは、Angular JSの機能でしたが、Angular 2.x以降では削除されました。しかし、Angular 2のクラスのイベント以来、AngularJSクラスのプロパティにバインドできます。

クラス名を持つクラスと、タイプと値を持つプロパティがあるとします。

export class className {
   property: propertytype = value;
}

その後、htmlタグのプロパティをクラスのプロパティにバインドできます。

<html tag htmlproperty = 'property'>

プロパティの値は、htmlのhtmlプロパティに割り当てられます。

データバインディングを実現する方法の例を見てみましょう。この例では、クラスのプロパティから画像ソースが取得される画像の表示を見ていきます。これを実現する手順は次のとおりです。

ステップ1 *-2つの画像をダウンロードします。この例では、以下に示すいくつかの簡単な画像をダウンロードします。

画像のダウンロード

ステップ2 *-これらの画像をappディレクトリの *Images というフォルダーに保存します。 imagesフォルダーが存在しない場合は、作成してください。

ステップ3 *-以下に示すように、app.component.tsに次のコンテンツを追加します。

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

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

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "url": 'app/Images/One.jpg'
   },

   {
      "ID": "2",
      "url": 'app/Images/Two.jpg'
   } ];
}

ステップ4 *-以下に示すように、app.componentlに次のコンテンツを追加します。

<div *ngFor = 'let lst of appList'>
   <ul>
      <li>{{lst.ID}}</li>
      <img [src] = 'lst.url'>
   </ul>
</div>

上記のapp.componentlファイルでは、クラスのプロパティから画像にアクセスしています。

出力

上記のプログラムの出力は次のようになります-

データバインディング

Angular2-data-binding

Angular 2-データバインディング

出力