Question

我是angular2的新手，所以试图在这里理解很多东西。我有一个选择框，我需要将值传递给更改方法（这是为自动完成尝试）。但是当我使用[（ngModel）]时，绑定不起作用并且抛出错误。有人会知道怎么做吗？＆lt; select class =＆＃34; form-control＆＃34;命名=＆＃34; SearchBy＆＃34; [（ngModel）] =＆＃34; SearchFor＆＃34; （变化）=＆＃34; changeSearchFor（SearchFor）＆＃34;＆GT; ＆lt; option value =＆＃34; 1＆＃34;＆gt;名称＆lt; /选项＆gt; ＆lt; option value =＆＃34; 2＆＃34;＆gt; ID＆lt; / option＆gt; ＆lt; option value =＆＃34; 3＆＃34;＆gt; SID＆lt; / option＆gt; ＆lt; option value =＆＃34; 4＆＃34;＆gt; Cost Center＆lt; / option＆gt; ＆lt; option value =＆＃34; 5＆＃34;＆gt;经理ID＆lt; / option＆gt; ＆lt; option value =＆＃34; 6＆＃34;＆gt; Unit＆lt; / option＆gt; ＆LT; /选择＆GT;

Answer 1

如果您使用ngModel使用ngModelChange来获取有关更改的通知。在(change)="..."更新

更新SearchFor之前，ngModel被解雇了

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

Plunker example

Answer 2

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

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

@NgModule({
    imports: [
      FormsModule
    ]
})

此外，您不需要将SeachFor作为参数传递，因为它是您已经在打字稿中链接的变量。

PD：如果您要包含自动填充功能，您是否考虑过定义模型驱动表单？这样，您可以订阅表单valueChanges observable并对其应用反应式编程，如此链接中所述： https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html

Answer 3

如果您只需要在函数中获取值，那么您可以在没有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

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

3 个答案: