NgModel kullanarak Angular 2 iki yönlü ciltleme çalışmıyor

'İnput' öğesinin bilinen bir özelliği olmadığı ve karşılık gelen bir özelliğe sahip eşleşen yönergeler olmadığı için 'ngModel'e bağlanılamıyor

Not: alfa.31 kullanıyorum

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 son halini 15 Eylül'de yayınladı. Angular 1'den farklı olarak ngModel, iki yönlü veri bağlama için Angular 2'deki yönergeyi kullanabilirsiniz , ancak bunu [(ngModel)]( Banana in a box sözdizimi ) gibi biraz farklı bir şekilde yazmanız gerekir . Hemen hemen tüm angular2 çekirdek yönergeleri kebab-caseartık desteklemiyor, bunun yerine kullanmanız gerekir camelCase.

Şimdi ngModeldirektif ait FormsModuleolduğunu, neden gerektiği dan içindeki modülün meta veri seçeneği (NgModule). Daha sonra sayfanızın içindeki yönergeyi kullanabilirsiniz .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

Anahtar noktaları:

1. angular2'deki ngModel, yalnızca FormsModule, AppModule'ünüzün bir parçası olarak mevcutsa geçerlidir.

2. ng-model sözdizimsel olarak yanlış.

3. köşeli parantezler [..] özellik bağlamayı ifade eder.
4. daire parantezleri (..) olay bağlamayı ifade eder.
5. [(..)] iki yönlü bağlamayı ifade ettiği gibi kare ve daire parantezleri bir araya getirildiğinde, genellikle muz kutusu olarak adlandırılır.

Yani, hatanızı düzeltmek için.

Adım 1: FormsModule'u İçe Aktarma

import {FormsModule} from '@angular/forms'

Adım 2: AppModule'ünüzün dizisini içe aktaracak şekilde ekleyin

imports :[ ... , FormsModule ]

Adım 3:ng-model Muz kutuları ile ngModel olarak değiştirin

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

Not: Ayrıca, iki yönlü veri bağlamayı ayrı ayrı ve aşağıda olduğu gibi halledebilirsiniz.

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

valueChange(value){

}

Angular2 finaline göre, FORM_DIRECTIVESyukarıda birçok kişi tarafından önerildiği gibi içe aktarmanız bile gerekmez . Ancak kebap kasası iyileştirilmesi için kaldırıldığı için sözdizimi değiştirildi .

Sadece yerini ng-modelile ngModelve sarın muz bir kutu . Ama şimdi kodu iki dosyaya ayırdınız:

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

Benim durumumda, girdi öğemde bir "ad" özniteliği eksikti.

Bana yardımcı olan cevap: Yönerge [(ngModel)] = artık rc5'te çalışmıyor

Özetlemek gerekirse: giriş alanları artık nameformda özellik gerektiriyor .

App.module.ts içinde

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

Daha sonra @NgModule dekoratörünün içe aktarmasında:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Açısal 2 Beta

Bu yanıt, angularJS v.2.0 Beta için Javascript kullananlar içindir .

ngModelKendi görüşünüzde kullanmak için angular'ın derleyicisine adlı bir yönergeyi kullandığınızı söylemelisiniz ngModel.

Nasıl?

ngModelAngular2 Beta'da kullanmak için iki kütüphane vardır ve bunlar ng.common.FORM_DIRECTIVESve ng.common.NgModel.

Aslında ng.common.FORM_DIRECTIVES, bir form oluştururken yararlı olan yönergeler grubundan başka bir şey değildir. NgModelYönerge de içerir .

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

});

ng-model yerine bu kodu kullanabilirsiniz:

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

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

app.component.ts içinde

Aşağıdaki kodu aşağıdaki dosyalara ekleyin.

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

Bu yardımcı olur umarım

iki yönlü bağlama [(ngModel)] ile çalışmak için AppModule'ünüze FormsModule içe aktarın