L’associazione angular a due vie con ngModel non funziona

Imansible collegarsi a ‘ngModel’ poiché non è una proprietà di conoscenza dell’elemento ‘input’ e non ci sono direttive corrispondenti con una proprietà corrispondente

Nota: im usando alpha.31

import { Component, View, bootstrap } from 'angular2/angular2' @Component({ selector: 'data-bind' }) @View({ template:`  {{ name }} ` }) class DataBinding { name: string; constructor(){ this.name = 'Jose'; } } bootstrap(DataBinding); 

Angular ha rilasciato la sua versione definitiva il 15 settembre. A differenza di Angular 1, è ansible utilizzare la direttiva ngModel in Angular 2 per l’associazione dati bidirezionale, ma è necessario scriverla in un modo leggermente diverso come [(ngModel)] ( Banana in una syntax della casella ). Quasi tutte le direttive core angular2 non supportano kebab-case ora invece dovresti usare camelCase .

Ora la direttiva ngModel appartiene a FormsModule , ecco perché è necessario import FormsModule dal modulo @angular/forms FormsModule @angular/forms all’interno imports dell’opzione metadata di AppModule (NgModule). Successivamente è ansible utilizzare la direttiva ngModel all’interno della pagina.

app / app.component.ts

 import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `

My First Angular 2 App

{{myModel}} ` }) export class AppComponent { myModel: any; }

app / app.module.ts

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], //< added FormsModule here declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } 

app / main.ts

 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule); 

Demo Plunkr

Punti chiave:

  1. ngModel in angular2 è valido solo se FormsModule è disponibile come parte del tuo AppModule.

  2. ng-model è sinteticamente sbagliato.

  3. parentesi quadre [..] si riferisce alla proprietà vincolante.
  4. le parentesi graffe del cerchio (..) si riferisce al binding dell’evento.
  5. quando le parentesi quadre e circolari sono unite come [(..)] si riferisce al legame a due vie, comunemente chiamato scatola di banane.

Quindi, per correggere il tuo errore.

Passaggio 1: importazione di FormsModule

 import {FormsModule} from '@angular/forms' 

Passaggio 2: aggiungilo all’array delle importazioni del tuo AppModule come

 imports :[ ... , FormsModule ] 

Passo 3: Cambia ng-model come ngModel con banane come

   

Nota: Inoltre, è ansible gestire il collegamento bidirezionale separatamente e in basso

  valueChange(value){ } 

Come per Angular2 final, non devi nemmeno importare FORM_DIRECTIVES come suggerito sopra da molti. Tuttavia, la syntax è stata modificata poiché il caso kebab è stato eliminato per il miglioramento.

Basta sostituire il ng-model con ngModel e avvolgerlo in una scatola di banane . Ma hai rovesciato il codice in due file ora:

app.ts:

 import { Component } from '@angular/core'; @Component({ selector: 'ng-app', template: `  {{ name }} ` }) export class DataBindingComponent { name: string; constructor() { this.name = 'Jose'; } } 

app.module.ts:

 import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DataBindingComponent } from './app'; //app.ts above @NgModule({ declarations: [DataBindingComponent], imports: [BrowserModule, FormsModule], bootstrap: [DataBindingComponent] }) export default class MyAppModule {} platformBrowserDynamic().bootstrapModule(MyAppModule); 

Angolare 2 Beta

Questa risposta è per coloro che usano Javascript per angularJS v.2.0 Beta.

Per usare ngModel nella tua vista dovresti dire al compilatore di ngModel che stai usando una direttiva chiamata ngModel .

Come?

Per usare ngModel ci sono due librerie in angular2 Beta, e sono ng.common.FORM_DIRECTIVES e ng.common.NgModel .

In realtà ng.common.FORM_DIRECTIVES non è altro che un gruppo di direttive utili quando si crea un modulo. Include anche la direttiva NgModel .

 app.myApp = ng.core.Component({ selector: 'my-app', templateUrl: 'App/Pages/myApp.html', directives: [ng.common.NgModel] // specify all your directives here }).Class({ constructor: function () { this.myVar = {}; this.myVar.text = "Testing"; }, }); 

Nell’app.module.ts

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

Più tardi nell’importazione del decor di @NgModule:

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

La risposta che mi ha aiutato: La direttiva [(ngModel)] = non funziona più in rc5

Per riassumere: i campi di input ora richiedono il name proprietà nel modulo.

invece di ng-model puoi usare questo codice:

 import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` 

{{box.value}}

`, }) export class AppComponent {}

all’interno del tuo app.component.ts