他の要素のイベントハンドラに選択されたオプションを渡す

Question

私はselect要素と角2コンポーネントのボタンを持っています。ボタン上でクリックハンドラがあり、ボタンをクリックすると、select要素の値にアクセスしたいと考えています。私は、次のことを試してみました：

import { Component } from 'angular2/core'; 
import { Department } from "../classes/department"; 

@Component({ 
    selector: 'my-component', 
    template: ` 
     <select #s> 
      <option *ngFor="#department of departments" [value]="department">{{ department.id }}</option> 
     </select> 

     <button (click)="removeDepartment(s.value)">Remove</button> 
    ` 
}) 
export class MyComponent { 
    // ... 

    removeDepartment(department: Department) : void { 
     console.log(department); 
     console.log(typeof department); 
    } 
} 

基本的に私はDepartmentオブジェクトの配列を持っている、と私はボタンをクリックしたときに、私はremoveDepartment方法に選択したオプションにバインドされたオブジェクトを渡すためにしようとしています。私がしようとしているように変数sを使用できるかどうかわかりません。その結果、オブジェクトの代わりに文字列[object Object]がメソッドに渡されます。

select要素のchangeイベントで私が欲しいものを達成できることは分かっていますが、私がしなければ、現在選択されている値をコンポーネントに保存したくありません。私は@ViewChildを使用してそれについても行くことができましたが、可能ならば私がやろうとしていることに似た何かをすることを好む。

私がしようとしているように変数を使用して現在選択されている値を渡すことは可能ですか、コンポーネント内に変数を保持して、changeイベントで更新する必要がありますか？

あなたはngValueの代わりvalue使用する必要がある値としてオブジェクトを使用したい場合は、私は角2ベータ15

Answer 1

を使用しています。 valueはstringをサポートしており、それに割り当てられた任意の値をstringifies：

<option *ngFor="let department of departments" [ngValue]="department">{{ department.id }}</option> 

これは、私はそれについて少し読んでいるので、私は実際にそれが動作するように取得しようとしていたbeta.14