Angular 2 Zweiweg mit ngModel Bindung funktioniert nicht

Question

nicht zu ‚ngModel‘ binden kann, da es keine Know-Eigenschaft des ‚Input‘ Elements ist, und es gibt keine passenden Richtlinien mit einer entsprechenden Eigenschaft

Hinweis : im mit alpha.31

import { Component, View, bootstrap } from 'angular2/angular2' 

@Component({ 
    selector: 'data-bind' 
}) 
@View({ 
    template:` 
     <input id="name" type="text" 
      [ng-model]="name" 
      (ng-model)="name = $event" /> 
     {{ name }} 
    ` 
}) 
class DataBinding { 
    name: string; 

    constructor(){ 
     this.name = 'Jose'; 
    } 
} 

bootstrap(DataBinding); 

Answer 1

Angular hat seine endgültige Version am 15. September veröffentlicht. Im Gegensatz zu Angular 1 können Sie die ngModel Direktive in Angular 2 für die Zwei-Wege-Datenbindung verwenden, aber Sie müssen sie etwas anders schreiben wie [(ngModel)] (Banana in a box syntax). Fast alle angular2 core-Direktiven unterstützen kebab-case jetzt nicht, stattdessen sollten Sie camelCase verwenden.

Jetzt ngModel Richtlinie gehört zu FormsModule, deshalb sollten Sie die FormsModule von @angular/forms Modul innerhalb imports Metadaten Option AppModule (NgModule) import. Danach können Sie die Direktive ngModel auf Ihrer Seite verwenden.

app/app.component.ts

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

@Component({ 
    selector: 'my-app', 
    template: `<h1>My First Angular 2 App</h1> 
    <input type="text" [(ngModel)]="myModel"/> 
    {{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

Answer 2

Angular 2 Beta

Diese Antwort ist für diejenigen, Javascript für AngularJS v.2.0 Beta verwenden.

Um in Ihrer Ansicht ngModel zu verwenden, sollten Sie dem Compiler des Angular mitteilen, dass Sie eine Direktive namens ngModel verwenden.

Wie?

Um ngModel zu verwenden gibt es zwei Bibliotheken in angular2 Beta, und sie sind ng.common.FORM_DIRECTIVES und ng.common.NgModel.

Eigentlich ng.common.FORM_DIRECTIVES ist nichts als Gruppe von Anweisungen, die nützlich sind, wenn Sie ein Formular erstellen. Es enthält NgModel Richtlinie auch.

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

}); 

Answer 3

Per Angular2 Finale, Sie haben nicht einmal FORM_DIRECTIVES zu importieren, wie oben von vielen vorgeschlagen. Die Syntax wurde jedoch zur Verbesserung um kebab-case was dropped geändert.

Ersetzen Sie einfach ng-model durch ngModel und wickeln Sie es in a box of bananas.Aber Sie haben jetzt den Code in zwei Dateien verschüttete:

app.ts:

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

@Component({ 
    selector: 'ng-app', 
    template: ` 
    <input id="name" type="text" [(ngModel)]="name" /> 
    {{ 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); 

Answer 4

Die Antwort, die mir geholfen haben: The directive [(ngModel)]= not working anymore in rc5

Um es zusammenzufassen: Eingabefelder benötigen jetzt die Eigenschaft name in der Form.

Answer 5

statt ng-Modell Sie diesen Code verwenden können:

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

@Component({ 
    selector: 'my-app', 
    template: `<input #box (keyup)="0"> 
    <p>{{box.value}}</p>`, 
}) 
export class AppComponent {} 

in Ihrem app.component.ts

Answer 6

Die wichtigsten Punkte:

1. ngModel in angular2 gültig ist nur wenn das FormsModule als Teil Ihres AppModules verfügbar ist.

2. ng-model ist syntaktisch falsch.

3. eckige Klammern [..] bezieht sich auf die Bindung der Eigenschaft.
4. Kreis Klammern (..) bezieht sich auf die Ereignisbindung.
5. wenn quadratische und kreisförmige Klammern zusammengefügt werden, wie [(..)] bezieht sich auf Zwei-Wege-Bindung, allgemein Bananenkasten genannt.

Also, um Ihren Fehler zu beheben.

Schritt 1: Importieren FormsModule

import {FormsModule} from '@angular/forms' 

Schritt 2: es bei der Einfuhr Array Ihrer AppModule hinzufügen als

imports :[ ... , FormsModule ] 

Schritt 3: ändern ng-model als ngModel mit Banane Kästen als

<input id="name" type="text" [(ngModel)]="name" /> 

Hinweis: Sie können aber auch die Zwei-Wege-Datenbindung getrennt sowie unter

<input id="name" type="text" [ngModel]="name" (ngModelChange)="valueChange($event)"/> 

valueChange(value){ 

} 

Answer 7

In dem app.module.ts

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

später in dem Import von @NgModule Dekorateur Griff :

@NgModule({ 
imports: [ 
BrowserModule, 
FormsModule 
] 

})