Angular2-データバインディング

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

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

export class className {
   property: propertytype = value;
}

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

<html tag htmlproperty = 'property'>

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

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

Step 1−任意の2つの画像をダウンロードします。この例では、以下に示すいくつかの簡単な画像をダウンロードします。

Step 2 −これらの画像をというフォルダに保存します Imagesappディレクトリにあります。画像フォルダがない場合は作成してください。

Step 3 −以下に示すように、app.component.tsに次のコンテンツを追加します。

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

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

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

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

Step 4 −以下に示すように、app.component.htmlに次のコンテンツを追加します。

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

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

出力

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