Angular 2 Zwei-Wege-Bindung mit ngModel funktioniert nicht

Kann nicht an 'ngModel' gebunden werden, da es keine bekannte Eigenschaft des 'input'-Elements ist und es keine übereinstimmenden Anweisungen mit einer entsprechenden Eigenschaft gibt

Hinweis: Ich verwende 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);

Angular hat seine endgültige Version am 15. September veröffentlicht. Im Gegensatz zu Angular 1 können Sie die ngModelDirektive in Angular 2 für die bidirektionale Datenbindung verwenden, müssen sie jedoch auf eine etwas andere Art und Weise schreiben [(ngModel)]( Banana in einer Box-Syntax ). Fast alle Angular2-Core-Direktiven werden kebab-casejetzt nicht unterstützt, stattdessen sollten Sie sie verwenden camelCase.

Jetzt ngModelgehört die Direktive dazu FormsModule, deshalb sollten Sie importdie Option FormsModulefrom @angular/formsmodule inside importsmetadata von AppModule(NgModule) verwenden. Danach können Sie die ngModelDirektive 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

Wichtige Punkte:

1. ngModel in angle2 ist nur gültig, wenn das FormsModule als Teil Ihres AppModule verfügbar ist.

2. ng-model ist syntaktisch falsch.

3. eckige Klammern [..] beziehen sich auf die Eigenschaftsbindung.
4. Kreisklammern (..) beziehen sich auf die Ereignisbindung.
5. Wenn quadratische und kreisförmige Klammern zusammengesetzt werden, wie [(..)] die Zwei-Wege-Bindung bezeichnet, die üblicherweise als Bananenschachtel bezeichnet wird.

Also, um Ihren Fehler zu beheben.

Schritt 1: FormsModule importieren

import {FormsModule} from '@angular/forms'

Schritt 2: Fügen Sie es dem Import-Array Ihres AppModule als hinzu

imports :[ ... , FormsModule ]

Schritt 3: Ändern Sie ng-modelals ngModel mit Bananenboxen als

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

Hinweis: Außerdem können Sie die bidirektionale Datenbindung sowohl separat als auch unten behandeln

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

valueChange(value){

}

Gemäß Angular2 final müssen Sie nicht einmal importieren, FORM_DIRECTIVESwie oben von vielen vorgeschlagen. Die Syntax wurde jedoch geändert, da der Kebab-Fall zur Verbesserung weggelassen wurde.

Ersetzen Sie einfach ng-modelmit ngModelund es in wickelt eine Schachtel mit Bananen . Aber Sie haben den Code jetzt in zwei Dateien aufgeteilt:

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

In meinem Fall fehlte mir ein "Name" -Attribut in meinem Eingabeelement.

Die Antwort, die mir geholfen hat: Die Direktive [(ngModel)] = funktioniert in rc5 nicht mehr

Um es zusammenzufassen: Eingabefelder erfordern jetzt eine Eigenschaft nameim Formular.

In der app.module.ts

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

Später im Import des @ NgModule-Dekorateurs:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Angular 2 Beta

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

Um es ngModelin Ihrer Ansicht zu verwenden, sollten Sie dem Compiler des Winkels mitteilen, dass Sie eine Direktive namens verwenden ngModel.

Wie?

Zur Verwendung ngModelgibt es in angular2 Beta zwei Bibliotheken, und sie sind ng.common.FORM_DIRECTIVESund ng.common.NgModel.

Eigentlich ng.common.FORM_DIRECTIVESist nichts als eine Gruppe von Anweisungen, die beim Erstellen eines Formulars nützlich sind. Es enthält NgModelauch die Richtlinie.

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

});

Importieren Sie FormsModule in Ihr AppModule, um mit der bidirektionalen Bindung [(ngModel)] mit Ihrem zu arbeiten

Anstelle von ng-model können Sie diesen Code verwenden:

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

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

in Ihrer app.component.ts

Fügen Sie den folgenden Code zu den folgenden Dateien hinzu.

app.component.ts

<input type="text" [(ngModel)]="fname" >
{{fname}}
export class appcomponent {
fname:any;
}

app.module.ts

import {FormsModule} from '@angular/forms';
@NgModule({
imports: [ BrowserModule,FormsModule ],
declarations: [ AppComponent],
bootstrap:    [ AppComponent ]
})

Hoffe das hilft