Angular 2+ und Observable: Kann nicht binden 'ngModel', da es nicht eine bekannte Eigenschaft von 'wählen'

Question

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

dieser Teil funktioniert:

<div *ngFor="let entry of entries | async"> 
    Label: {{ entry.label }}<br> 
    Value: {{ entry.value }} 
</div> 

aber ich Probleme mit der Select-Box haben, ist die Fehlermeldung:

Kann nicht binden ‚ngModel‘, da es nicht eine bekannte Eigenschaft von ‚select‘ ist

Die gesamte Komponente:

//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()); 
    } 
} 

und data.json

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

Answer 1

> = RC verwenden. 5

Die FormsModule Bedarf importiert werden ngModel verfügbar

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

< = RC.4

In config.js hinzufügen

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

in main.ts hinzufügen

012 zu machen

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

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

Plunker example

Siehe auch

• https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

Answer 2

Sie die folgende Sie [ngValue] statt [val]

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

Answer 3

Sie müssen das folgende in der app.module.ts Datei hinzuzufügen.

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

Und

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

Answer 4

Dies wurde in meinem Test-Suite geschieht mit mir, trotz der Tatsache, dass ich bereits FormsModule importiert würde in *.module.ts Datei meiner Komponente.

In meiner *.component.spec.ts Datei, die ich brauchte beide FormsModuleundReactiveFormsModule auf die Einfuhren Liste in configureTestingModule hinzuzufügen:

meinem Fall

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

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

Dieser fixiert.

Answer 5

In app.modules.ts nach

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

put:

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

Und dann in

imports: [ 
BrowserModule 
], 

die FormsModule etwas einfügen wie:

imports: [ 
BrowserModule, 
FormsModule 
],