web-dev-qa-db-fra.com

Angular 2+ et observables: impossible de se lier à 'ngModel' car ce n'est pas une propriété connue de 'select'

EDIT: Mise à jour de Plunkr: http://plnkr.co/edit/fQ7P9KPjMxb5NAhccYIq?p=preview

cette partie fonctionne:

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

mais j'ai des problèmes avec la zone de sélection, le message d'erreur est: 

Impossible de se lier à 'ngModel' car ce n'est pas une propriété connue de 'select'

L'ensemble du composant:

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

et data.json

[
  {
    "timestamp": 0,
    "label": "l1",
    "value": 1
  },
  {
    "timestamp": 0,
    "label": "l2",
    "value": 2
  },
  {
    "timestamp": 0,
    "label": "l3",
    "value": 3    
  }
]
jsonasynchronousdrop-down-menuangularangular2-observables
17
Lonely

> = RC.5

La FormsModule doit être importée pour rendre ngModel disponible

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

<= RC.4

Dans config.js ajouter

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

dans main.ts add

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

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

exemple Plunker

Voir également 

17
Günter Zöchbauer

Dans app.modules.ts après 

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

mettre:

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

Et puis dans 

imports: [
 BrowserModule
 ],

insérez le FormsModule quelque chose comme:

imports: [
 BrowserModule,
 FormsModule
 ],
6
Sharif Yazdian

Cela m'arrivait dans ma suite de tests, malgré le fait que j'avais déjà importé FormsModule dans le fichier *.module.ts de mon composant.

Dans mon fichier *.component.spec.ts, je devais ajouter à la fois FormsModule et ReactiveFormsModule à la liste des importations dans configureTestingModule:

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

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

Cela a corrigé mon cas.

2
Rob Lyndon

L'erreur ci-dessus est due au fait que vous n'avez pas importé FormsModule. NgModel est présent dans le package FormsModule. Pour supprimer cette erreur, ajoutez donc import {FormsModule} from '@angular/forms' et ajoutez FormsModule aux importations dans la classe app.module.ts.

0
Alekya

procédez comme suit, vous devez utiliser [ngValue] au lieu de [val]

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

Vous devez ajouter les éléments suivants à votre fichier app.module.ts.

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

Et,

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