Dwukierunkowe wiązanie Angular 2 przy użyciu ngModel nie działa

Nie można powiązać z „ngModel”, ponieważ nie jest to znana właściwość elementu „input” i nie ma zgodnych dyrektyw z odpowiednią właściwością

Uwaga: używam 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 wydał swoją ostateczną wersję 15 września. W przeciwieństwie do Angulara 1 możesz użyć ngModeldyrektywy w Angular 2 do dwukierunkowego wiązania danych, ale musisz napisać ją w nieco inny sposób, np. [(ngModel)]( Banana w składni pudełkowej ). Prawie wszystkie podstawowe dyrektywy angular2 nie obsługują kebab-caseteraz, zamiast tego powinieneś użyć camelCase.

Teraz ngModeldyrektywa należy do FormsModule, to dlaczego ty z modułem wewnątrz opcji metadanych (NgModule). Następnie możesz użyć dyrektywy wewnątrz swojej strony.importFormsModule@angular/formsimportsAppModulengModel

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

Kluczowe punkty:

1. ngModel w angular2 jest ważny tylko wtedy, gdy FormsModule jest dostępny jako część Twojego AppModule.

2. ng-model jest błędna syntatycznie.

3. nawiasy kwadratowe [..] odnoszą się do powiązania właściwości.
4. nawiasy okrągłe (..) odnoszą się do wiązania zdarzenia.
5. kiedy nawiasy kwadratowe i okrągłe są zestawione razem jako [(..)] odnosi się do wiązania dwukierunkowego, powszechnie nazywanego pudełkiem bananowym.

Tak więc, aby naprawić błąd.

Krok 1: Importowanie FormsModule

import {FormsModule} from '@angular/forms'

Krok 2: Dodaj go do importu tablicy swojego AppModule jako

imports :[ ... , FormsModule ]

Krok 3: Zmień ng-modeljako ngModel z pudełkami bananów na

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

Uwaga: Dwukierunkowe wiązanie danych można również obsługiwać oddzielnie, jak również poniżej

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

valueChange(value){

}

Zgodnie z wersją końcową Angular2 nie musisz nawet importować, FORM_DIRECTIVESjak sugerowało to wielu powyżej. Jednak składnia została zmieniona, ponieważ skrzynka na kebab została usunięta dla poprawy.

Po prostu zastąp ng-modelgo ngModeli zawiń w pudełko bananów . Ale teraz podzieliłeś kod na dwa pliki:

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

W moim przypadku brakowało mi atrybutu „nazwa” w elemencie wejściowym.

Odpowiedź, która mi pomogła: Dyrektywa [(ngModel)] = nie działa już w rc5

Podsumowując: pola wejściowe wymagają teraz właściwości namew formularzu.

W pliku app.module.ts

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

Później w imporcie dekoratora @NgModule:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Angular 2 Beta

Ta odpowiedź jest dla tych, którzy używają Javascript dla angularJS v.2.0 Beta.

Aby użyć ngModelw swoim widoku, powinieneś powiedzieć kompilatorowi angulara, że ​​używasz dyrektywy o nazwiengModel .

W jaki sposób?

Aby użyć, ngModelistnieją dwie biblioteki w angular2 Beta i są to ng.common.FORM_DIRECTIVESing.common.NgModel .

Właściwie ng.common.FORM_DIRECTIVESto nic innego jak grupa dyrektyw, które są przydatne podczas tworzenia formularza. Zawiera również NgModeldyrektywę.

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

});

zamiast ng-model możesz użyć tego kodu:

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

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

wewnątrz pliku app.component.ts

Dodaj poniższy kod do poniższych plików.

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 ]
})

Mam nadzieję że to pomoże

importuj FormsModule do swojego AppModule do pracy z dwukierunkowym wiązaniem [(ngModel)] z twoim