json - async - input observable angular 2

Angular 2+ y observables: no se puede vincular a ''ngModel'' ya que no es una propiedad conocida de ''select''

Question

EDITAR: Plunkr actualizado: http://plnkr.co/edit/fQ7P9KPjMxb5NAhccYIq?p=preview

esta parte funciona:

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

pero tengo problemas con el cuadro de selección, el mensaje de error es:

No se puede vincular a ''ngModel'' ya que no es una propiedad conocida de ''select''

Todo el 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: `

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

y data.json

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

Answer 1

El error anterior se debe a que no ha importado FormsModule, ngModel está presente en el paquete FormsModule, por lo tanto, para deshacerse de este error, agregue import {FormsModule} from ''@angular/forms'' y agregue FormsModule en importaciones en app.module. clase ts

Answer 2

En app.modules.ts después

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

poner:

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

Y luego en

imports: [
 BrowserModule
 ],

inserte el FormsModule algo como:

imports: [
 BrowserModule,
 FormsModule
 ],

Answer 3

Esto me estaba ocurriendo en mi suite de pruebas, a pesar de que ya había importado FormsModule en el archivo *.module.ts mi componente.

En mi archivo *.component.spec.ts , necesitaba agregar FormsModule y ReactiveFormsModule a la lista de importaciones en configureTestingModule :

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

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

Esto arregló mi caso.

Answer 4

haga lo siguiente, debe usar [ngValue] lugar de [val]

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

Answer 5

app.module.ts agregar lo siguiente a su archivo app.module.ts .

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

Y,

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

Answer 6

> = RC.5

FormsModule debe importarse para que ngModel esté disponible

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

<= RC.4

En config.js agrega

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

en main.ts agregar

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

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

Ejemplo de Plunker

Ver también

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