Angular 2 で select 要素をオブジェクトにバインドする

Angular 2 は、Web アプリの作成に使用される人気のあるフレームワークです。Angular 2 で最も一般的なタスクの 1つは、select 要素をオブジェクトにバインドすることです。

この記事では、ng-for および ng-value ディレクティブを使用して、select 要素を Angular 2 のオブジェクトにバインドする方法を学習します。

ng-for と ng-value を使用して、選択要素を Angular 2 のオブジェクトにバインドする

Ng-For は、組み込みのテンプレートディレクティブであり、配列やオブジェクトなどのアイテムのコレクションを簡単にループして、それぞれのテンプレートを作成できます。

*ngFor="let <value> of <collection>"

ng-value ディレクティブは、select 要素をオブジェクトにバインドします。これは、select 要素の値にマップする必要があるオブジェクトのプロパティの名前を指定します。

 <input ng-value="expression"></input>

時々、初心者は ng-value と value の間で混乱します。したがって、選択要素を Angular 2 のオブジェクトにバインドする作業をしている場合は、ng-value と value の違いを知っている必要があります。

Angular の ng-value と value の違い

違いは、value は常に文字列であるのに対し、ngValue ではオブジェクトを渡すことができることです。たとえば、ドロップダウンにアイテムの名前を表示する必要があるユースケースがあります。

また、メニューから 1つのオブジェクトを選択する場合は、データベースを検索するためにオブジェクトの ID を選択する必要があります。オブジェクトが必要なため、このようなシナリオで ngValue を使用すると便利です。

さらに、入力するオブジェクトモデルをオブジェクトで定義する必要があります。

ng-value の詳細については、ここをクリックしてください。

SelectElement を Angular 2 のオブジェクトにバインドする手順

従うべきいくつかの基本的な手順を以下に示します。

1. ng-model 属性を select 要素に追加します。
2. バインドするオブジェクトに selected 属性を追加します。
3. 中括弧構文 {{obj.property}} を使用して、オブジェクトプロパティを select 要素にバインドします。

すべてのステップを詳細に理解するのに役立つ例を見てみましょう。

まず、AppComponent という名前のコンポーネントを作成します。次に、id と name を示す example という名前のインターフェイスオブジェクトを作成します。

この場合、id と name の両方が文字列を格納します。上記の 2つの手順が終わったら、いくつかの情報を追加してオプションを変更します。

完全な/app.component.ts コードを以下に示します。

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


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Demo';

  selectedObject : example;
  SimpleExample = [
    {id: 'Welcome to New York City', name: 'New York'},
    {id: 'Welcome to Japan', name: 'Japan'},
    {id: 'Welcome to Singapore', name: 'Singapore'},
    {id: 'Welcome to Delft', name: 'Delft'}
  ]
}

interface example{
  id:string;
  name:string;
}

component.ts ファイルに、変数 selectedObject、オブジェクト example を追加し、ngModel を使用して select 要素にバインドします。

別の変数 SimpleExample には、ngValue 選択オプションを表示するために使用されるオブジェクトのコレクションが含まれています。

完全な/app.component.html コードを以下に示します。

<h2>Angular 2 Select Example</h2>

<select [(ngModel)]="selectedObject">
<option *ngFor="let show of SimpleExample" [ngValue]="show">
{{show.name}}
</option>
</select>

{{selectedObject | json}}

これで、example オブジェクトが selectedObject に追加されました。そして、JSON パイプを使用して表示しました。

JSON パイプは、入力オブジェクトを目的の結果に変換し、変数に割り当てたり、引数として渡したりすることができます。組み込みの JavaScript 関数 JSON.stringify() を使用して、データを JSON 文字列に変換します。

Angular JSON Pipe の詳細については、ここをクリックしてください。

上記の例の次の出力が得られます。

ここをクリックして、上記の完全に機能するコードを確認してください。