<select>标记模型值不起作用

我是angular2的新手，所以试图理解这里的很多东西。我有一个选择框，我需要将值传递给更改方法（正在尝试自动完成）。但是，当我使用[（ngModel）]时，该绑定不起作用，并抛出一个错误。有人会知道如何做到这一点？<select>标记模型值不起作用

<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>

来源

2017-07-18 Aneez

你能告诉你的组件和 – brijmcq

你在'SearchFor'得到错误的错误？ – Darshita

“正在抛出一个错误”请发布完整且确切的错误消息 –

如果您使用ngModel请使用ngModelChange以获得有关更改的通知。 (change)="..."是SearchFor之前触发由ngModel更新更新

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

Plunker example

来源

2017-07-18 08:15:48

如果您使用ngModel指令得到错误，可能是由于您没有导入FormsModule，因为语法对我来说似乎是正确的。您在模块中需要这些线：

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

来源

2017-07-18 08:04:11 Siro

如果你只需要在你的功能得到一个值，那么你可以不用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>

如果你使用ngModel，确保进口，并加入到@NgModule的进口阵列FormsModule：

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

例如plunker： https://plnkr.co/edit/PGeipOAz5kKpxO5HdTc8?p=preview

来源

2017-07-18 08:05:48 Andriy

<select>标记模型值不起作用

回答

相关问题