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

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

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

[
  {
    \"timestamp\": 0,
    \"label\": \"l1\",
    \"value\": 1
  },
  {
    \"timestamp\": 0,
    \"label\": \"l2\",
    \"value\": 2
  },
  {
    \"timestamp\": 0,
    \"label\": \"l3\",
    \"value\": 3    
  }
]

回答1:

>= RC.5

The FormsModule needs to be imported to make ngModel available

@NgModule({
  imports: [BrowserModule /* or CommonModule */, 
  FormsModule, ReactiveFormsModule],
  ...
)}
class SomeModule {}

<= RC.4

In config.js add

'@angular/forms': {
  main: 'bundles/forms.umd.js',
  defaultExtension: 'js'
},

in main.ts add

import {provideForms, disableDeprecatedForms} from '@angular/forms';

bootstrap(App, [disableDeprecatedForms(),provideForms()])

Plunker example

回答2:

In app.modules.ts after

import { NgModule } from '@angular/core';

put:

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

And then in

imports: [
 BrowserModule
 ],

insert the FormsModule something like:

imports: [
 BrowserModule,
 FormsModule
 ],

回答3:

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.

In my *.component.spec.ts file, I needed to add both FormsModule and ReactiveFormsModule to the imports list in configureTestingModule:

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

...
TestBed.configureTestingModule({
    imports: [ 
        FormsModule, 
        ReactiveFormsModule,
        ....],
    providers: [MyComponent, ...],
    declarations: [MyComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

This fixed my case.

回答4:

You need to add the following to your app.module.ts file.

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

And,

@NgModule({
   imports: [
      FormsModule,
      ...
   ]})

回答5:

do the following you have to use [ngValue] instead of [val]

<select [(ngModel)]="selectValue">
    <option *ngFor="let entry of entries | async" 
        [ngValue]="entry.value">{{entry.label}}
    </option>
</select>

回答6:

The above error is caused because you haven't imported FormsModule,ngModel is present in the FormsModule package so,to get rid of this error add import {FormsModule} from '@angular/forms' and add FormsModule in imports in app.module.ts class.

来源：https://stackoverflow.com/questions/38983766/angular-2-and-observables-cant-bind-to-ngmodel-since-it-isnt-a-known-prope

标签

json