El enlace angular de dos vías usando ngModel no funciona

No se puede enlazar con ‘ngModel’ ya que no es una propiedad de conocimiento del elemento ‘input’ y no hay directivas coincidentes con la propiedad correspondiente

Nota: estoy 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 lanzado su versión final el 15 de septiembre. A diferencia de Angular 1, puede usar la directiva ngModel en Angular 2 para el enlace de datos bidireccional, pero debe escribirlo de una manera un poco diferente como [(ngModel)] ( Banana en una syntax de cuadro ). Casi todas las directivas de núcleo angular2 no son compatibles con kebab-case ahora, en su lugar, debe utilizar camelCase .

Ahora la directiva ngModel pertenece a FormsModule , por eso debe import el FormsModule del FormsModule @angular/forms dentro de la opción de imports metadatos de AppModule (NgModule). A partir de entonces, puede usar la directiva ngModel dentro de su página.

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

Puntos clave:

  1. ngModel en angular2 es válido solo si FormsModule está disponible como parte de su AppModule.

  2. ng-model es sintácticamente incorrecto.

  3. llaves cuadradas [..] se refiere a la propiedad vinculante.
  4. círculo llaves (..) se refiere a la vinculación del evento.
  5. cuando las llaves cuadradas y circulares se juntan como [(..)] se refiere a la unión de dos vías, comúnmente llamada caja de plátano.

Entonces, para arreglar tu error.

Paso 1: Importación de FormsModule

 import {FormsModule} from '@angular/forms' 

Paso 2: agrégalo a la matriz de importaciones de tu AppModule como

 imports :[ ... , FormsModule ] 

Paso 3: Cambia ng-model como ngModel con cajas de plátano como

   

Nota: Además, puede manejar el enlace de datos bidireccional por separado y por debajo

  valueChange(value){ } 

Según Angular2 final, ni siquiera tiene que importar FORM_DIRECTIVES como muchos sugirieron anteriormente. Sin embargo, la syntax se modificó cuando se quitó kebab-case para mejorar.

Simplemente reemplace ng-model con ngModel y envuélvalo en una caja de plátanos . Pero ha dertwigdo el código en dos archivos ahora:

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

Angular 2 Beta

Esta respuesta es para quienes usan Javascript para angularJS v.2.0 Beta.

Para usar ngModel en su vista, debe decirle al comstackdor angular que está usando una directiva llamada ngModel .

¿Cómo?

Para usar ngModel hay dos bibliotecas en angular2 Beta, y son ng.common.FORM_DIRECTIVES y ng.common.NgModel .

En realidad ng.common.FORM_DIRECTIVES no es más que un grupo de directivas que son útiles cuando estás creando un formulario. Incluye la directiva NgModel también.

 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"; }, }); 

En la app.module.ts

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

Más tarde en la importación del decorador de @NgModule:

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

La respuesta que me ayudó: La directiva [(ngModel)] = ya no funciona en rc5

Para resumir: los campos de entrada ahora requieren el name de la propiedad en el formulario.

en lugar de ng-model puedes usar este código:

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

{{box.value}}

`, }) export class AppComponent {}

dentro de tu app.component.ts