<select>タグモデルの値が機能しない

Question

私はここで多くのことを理解しようとしているので、angular2には新しいです。私は（私はオートコンプリートのために試されている）変更時にメソッドに渡す値が必要な選択ボックスを持っています。しかし、[（ngModel）]を使用すると、バインドが機能しておらず、エラーが発生しています。誰でもこれをする方法を知っていますか？

<select class="form-control" name="SearchBy" [(ngModel)]="SearchFor" (change)="changeSearchFor(SearchFor)"> 
         <option value="1">Name</option> 
         <option value="2">ID</option> 
         <option value="3">SID</option> 
         <option value="4">Cost Center</option> 
         <option value="5">Manager ID</option> 
         <option value="6">Unit</option> 
        </select> 

Answer 1

ngModelを使用している場合、変更についての通知を受けるにはngModelChangeを使用してください。 SearchForが

<select class="form-control" name="SearchBy" [(ngModel)]="SearchFor" (ngModelChange)="changeSearchFor($event)"> 

Plunker example

Answer 2

ngModelディレクティブを使用してエラーが発生した場合は、おそらく、FormsModuleをインポートしていないことが原因です。構文は正しいようです。 あなたはモジュール内のこれらの行を必要とする：それはあなたがすでにtypescriptですにリンクしている変数であるよう

import {FormsModule} from '@angular/forms'; 

@NgModule({ 
    imports: [ 
     FormsModule 
    ] 
}) 

また、あなたは、パラメータとしてSeachForを渡す必要はありません。

PD：オートコンプリートを含める場合は、モデル駆動型を定義することを検討しましたか？あなたが観察フォームvalueChangesに加入し、それがこのリンクで説明するように、それに反応するプログラミングを適用することができますこの方法：あなただけの関数内で値を取得する必要がある場合は https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html

Answer 3

、その後、あなたはngModelせずにそれを行うことができます：

import {FormsModule} from '@angular/forms' 
... 
@NgModule({ 
    imports: [ BrowserModule, FormsModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 

例plunker：あなたはngModelを使用しない場合

<select class="form-control" name="SearchBy" (change)="changeSearchFor($event.target.value)"> 
    <option value="1">Name</option> 
    <option value="2">WWID</option> 
    <option value="3">IDSID</option> 
    <option value="4">Cost Center</option> 
    <option value="5">Manager WWID</option> 
    <option value="6">Organisational Unit</option> 
</select> 

、インポートおよび@NgModuleの輸入アレイFormsModuleに追加してください： https://plnkr.co/edit/PGeipOAz5kKpxO5HdTc8?p=preview