[英]Angular 2+ and Observables: Can't bind to 'ngModel' since it isn't a known property of 'select'
EDIT: Updated Plunkr: http://plnkr.co/edit/fQ7P9KPjMxb5NAhccYIq?p=preview 编辑:更新的Plunkr: http ://plnkr.co/edit/fQ7P9KPjMxb5NAhccYIq?p = preview
this part works: 这部分工作:
<div *ngFor="let entry of entries | async">
Label: {{ entry.label }}<br>
Value: {{ entry.value }}
</div>
but I've problems with the select box, the error message is: 但是选择框出现问题,错误消息是:
Can't bind to 'ngModel' since it isn't a known property of 'select' 无法绑定到“ ngModel”,因为它不是“ select”的已知属性
The whole Component: 整个组件:
//our root app component
import {Component} from '@angular/core';
import {NgFor} from '@angular/common';
import {HTTP_PROVIDERS, Http} from '@angular/http';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Rx';
@Component({
selector: 'my-app',
providers: [HTTP_PROVIDERS],
template: `
<select [(ngModel)]="selectValue" name="selectValue">
<option *ngFor="let entry of entries | async"
[value]="entry.value">{{entry.label}}</option>
</select>
<div *ngFor="let entry of entries | async">
Label: {{ entry.label }}<br>
Value: {{ entry.value }}
</div>
`,
directives: [NgFor]
})
export class App {
entries: any = {};
selectValue:any;
constructor(private _http: Http) {
this.entries = this._http.get("./data.json")
.map(res => res.json());
}
}
and data.json 和data.json
[
{
"timestamp": 0,
"label": "l1",
"value": 1
},
{
"timestamp": 0,
"label": "l2",
"value": 2
},
{
"timestamp": 0,
"label": "l3",
"value": 3
}
]
>= RC.5 > = RC.5
The FormsModule
needs to be imported to make ngModel
available 该FormsModule
需从国外进口,使ngModel
可用
@NgModule({
imports: [BrowserModule /* or CommonModule */,
FormsModule, ReactiveFormsModule],
...
)}
class SomeModule {}
<= RC.4 <= RC.4
In config.js
add 在config.js
添加
'@angular/forms': {
main: 'bundles/forms.umd.js',
defaultExtension: 'js'
},
in main.ts
add 在main.ts
添加
import {provideForms, disableDeprecatedForms} from '@angular/forms';
bootstrap(App, [disableDeprecatedForms(),provideForms()])
See also 也可以看看
In app.modules.ts after 在app.modules.ts之后
import { NgModule } from '@angular/core';
put: 放:
import { FormsModule } from '@angular/forms';
And then in 然后在
imports: [
BrowserModule
],
insert the FormsModule something like: 插入FormsModule,例如:
imports: [
BrowserModule,
FormsModule
],
This was happening to me in my testing suite, despite the fact that I'd already imported FormsModule
in my component's *.module.ts
file. 尽管我已经在组件的*.module.ts
文件中导入了FormsModule
,但在我的测试套件中却发生了这种情况。
In my *.component.spec.ts
file, I needed to add both FormsModule
and ReactiveFormsModule
to the imports list in configureTestingModule
: 在我的*.component.spec.ts
文件,我需要既能补充FormsModule
和 ReactiveFormsModule
在进口清单configureTestingModule
:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
TestBed.configureTestingModule({
imports: [
FormsModule,
ReactiveFormsModule,
....],
providers: [MyComponent, ...],
declarations: [MyComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
This fixed my case. 这解决了我的问题。
do the following you have to use [ngValue]
instead of [val]
执行以下操作,您必须使用[ngValue]
而不是[val]
<select [(ngModel)]="selectValue">
<option *ngFor="let entry of entries | async"
[ngValue]="entry.value">{{entry.label}}
</option>
</select>
You need to add the following to your app.module.ts
file. 您需要将以下内容添加到app.module.ts
文件中。
import { FormsModule } from '@angular/forms';
And, 和,
@NgModule({
imports: [
FormsModule,
...
]})
导致上述错误的原因是,您尚未导入FormsModule,FormsModule软件包中存在ngModel,因此,要消除此错误,请import {FormsModule} from '@angular/forms'
添加import {FormsModule} from '@angular/forms'
然后在app.module中的导入中添加FormsModule。 ts类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.