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'' (6)
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
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
}
]
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
],
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.
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>
app.module.ts
agregar lo siguiente a su archivo
app.module.ts
.
import { FormsModule } from ''@angular/forms'';
Y,
@NgModule({
imports: [
FormsModule,
...
]})
> = 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()])
Ver también