角4 - 選択リストのオプション値にオブジェクトを使用する

Question

同様の質問が出されていることは知っていますが、良い答えでは誰も見つかりませんでした。各オプションの値がオブジェクトである角型で選択リストを作成したいと思います。また、私は2ウェイ・データ・バインディングを使用したくありません。例えば私のコンポーネントは、これらのフィールドを持っている場合：

 

    lUsers: any[] = [ 
     { Name: 'Billy Williams', Gender: 'male' }, 
     { Name: 'Sally Ride', Gender: 'female'} 
     ]; 
    curUser: any; 

を、私は私のHTMLテンプレートは、この含まれているしたいと思います：このコードで

 

    <select #selectElem (change)="setNewUser(selectElem.value)"> 
     <option *ngFor="let user of lUsers" [ngValue]="user"> 
      {{user.Name}} 
     </option> 
    </select> 

を、しかし、私のsetNewUser（）関数は、選択したユーザーの名前の内容を受け、フィールド。なぜそれが特定の分野を選ぶのか、私は分かりません。私は、選択したオプションの "値"を受け取ることを期待しています。これは特にユーザーオブジェクトに設定されています。

このオプションでは、valueの代わりにngValueを使用しました。それはSOの他の提案によるものでした。値を代わりに使用すると、オブジェクトはsetNewUser（）が受け取る文字列 '[Object object]'に変換され、無駄です。

私はWindows 10で動作しています。角度4.0.0と@ angular/cli 1.1.2を使用しています。ここでsetNewUser（）メソッドは次のとおりです。

 

    setNewUser(user: User): void { 

    console.log(user); 
    this.curUser = user; 
    } // setNewUser() 

私はそれに渡されている正確なものだけ両方の私のログを決定し、また、テンプレートにこれを含めています：optionタグのvalue属性として<pre>{{curUser}}</pre>

Answer 1

オブジェクト全体を保存することができない場合は、選択された項目を追跡するためにをlUsers配列に作成します。

HTML：

<select #selectElem (change)="setNewUser(selectElem.value)"> 
    <option *ngFor="let user of lUsers" [value]="user.id"> 
     {{user.Name}} 
    </option> 
</select> 

これは変化に私たちのsetNewUser機能に独自のidを通過します。あなたのcomponent.tsで

：ここ

... 

lUsers: any[] = [ 
    { id: 1, Name: 'Billy Williams', Gender: 'male' }, 
    { id: 2, Name: 'Sally Ride', Gender: 'female'} 
]; 
curUser: any = this.lUsers[0]; // first will be selected by default by browser 

... 

setNewUser(id: any): void { 
    console.log(id); 
    // Match the selected ID with the ID's in array 
    this.curUser = this.lUsers.filter(value => value.id === parseInt(id)); 
    console.log(this.curUser); 
} 

は、上記のコードのplnkrデモです。開発ツールを開いてコンソールログを表示します。

Answer 2

-Elementsでは[value]の代わりに[ngValue]を使用できます。 それは私のために働く。

私はその情報ここに見つけた：https://www.reddit.com/r/Angular2/comments/65run4/select_option_using_value_vs_ngvalue/

Answer 3

私は現在[ngValue]を使用していますし、それがうまくオブジェクトを格納します。

あなたは既に[ngValue]を使用しましたので、代わりに(ngModelChange)の(change)が、そうthis question

で見つけることができます使用して問題を経験した理由として説明は、おそらくこのような何かをしたい、あなただけを使用する場所ngModelChangeディレクティブを使用することができるようにするために結合片道：

<select (ngModelChange)="setNewUser($event)" (ngModel)="lUsers"> 
     <option *ngFor="let user of lUsers" [ngValue]="user"> 
      {{user.Name}} 
     </option> 
    </select> 

そして、あなたのTSファイルは、イベントをキャプチャし、idでそれを追跡することなく、ユーザーオブジェクトを受け取ります、基本的には古い方法を再利用することは良いだろう十分：

setNewUser(user: User): void { 
    console.log(user); 
    this.curUser = user; 
    }