Angular 2+ e Observables: imansible collegarsi a ‘ngModel’ poiché non è una proprietà nota di ‘select’

EDIT: Plunkr aggiornato: http://plnkr.co/edit/fQ7P9KPjMxb5NAhccYIq?p=preview

questa parte funziona:

Label: {{ entry.label }}
Value: {{ entry.value }}

ma ho problemi con la casella di selezione, il messaggio di errore è:

Imansible eseguire il binding a “ngModel” poiché non è una proprietà nota di “seleziona”

L’intera componente:

 //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: `  {{entry.label}}  
Label: {{ entry.label }}
Value: {{ entry.value }}
`, directives: [NgFor] }) export class App { entries: any = {}; selectValue:any; constructor(private _http: Http) { this.entries = this._http.get("./data.json") .map(res => res.json()); } }

e data.json

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

    > = RC.5

    FormsModule deve essere importato per rendere disponibile ngModel

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

    < = RC.4

    In config.js aggiungi

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

    in main.ts aggiungi

     import {provideForms, disableDeprecatedForms} from '@angular/forms'; bootstrap(App, [disableDeprecatedForms(),provideForms()]) 

    Esempio di Plunker

    Guarda anche

    In app.modules.ts dopo

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

    mettere:

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

    E poi dentro

     imports: [ BrowserModule ], 

    inserisci il FormsModule qualcosa come:

     imports: [ BrowserModule, FormsModule ], 

    Questo mi stava accadendo nella mia suite di test, nonostante avessi già importato FormsModule nel file *.module.ts mio componente.

    Nel mio file *.component.spec.ts , avevo bisogno di aggiungere sia FormsModule che ReactiveFormsModule all’elenco delle importazioni in configureTestingModule :

     import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ... TestBed.configureTestingModule({ imports: [ FormsModule, ReactiveFormsModule, ....], providers: [MyComponent, ...], declarations: [MyComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA] }) 

    Questo ha risolto il mio caso.

    Devi aggiungere quanto segue al tuo file app.module.ts .

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

    E,

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

    fai quanto segue devi usare [ngValue] invece di [val]

      

    L’errore di cui sopra è causato dal fatto che non hai importato FormsModule, ngModel è presente nel pacchetto FormsModule quindi, per eliminare questo errore, aggiungi import {FormsModule} from '@angular/forms' e aggiungi FormsModule nelle importazioni in app.module. class ts.