การผูกสองทางเชิงมุม 2 โดยใช้ ngModel ไม่ทำงาน

ไม่สามารถเชื่อมโยงกับ 'ngModel' เนื่องจากไม่ใช่คุณสมบัติที่ทราบขององค์ประกอบ 'อินพุต' และไม่มีคำสั่งที่ตรงกันกับคุณสมบัติที่เกี่ยวข้อง

หมายเหตุ: ฉันใช้ 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 ได้เปิดตัวเวอร์ชันสุดท้ายในวันที่ 15 กันยายน ไม่เหมือน Angular 1 คุณสามารถใช้ngModelคำสั่งใน Angular 2 สำหรับการผูกข้อมูลสองทาง แต่คุณต้องเขียนด้วยวิธีที่แตกต่างกันเล็กน้อยเช่น[(ngModel)]( Banana in a box syntax ) คำสั่งหลัก angular2 เกือบทั้งหมดไม่รองรับkebab-caseตอนนี้คุณควรใช้camelCaseแทน

ตอนนี้ngModelคำสั่งเป็นของFormsModuleนั่นคือเหตุผลที่คุณควรimportเลือกFormsModuleจาก@angular/formsโมดูลภายในimportsเมทาดาทาของAppModule(NgModule) หลังจากนั้นคุณสามารถใช้ngModelคำสั่งภายในบนเพจของคุณได้

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 { }

แอพ / main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Demo Plunkr

ประเด็นสำคัญ:

1. ngModel ใน angular2 จะใช้ได้ก็ต่อเมื่อ FormsModule พร้อมใช้งานเป็นส่วนหนึ่งของ AppModule ของคุณ

2. ng-model ผิดทางไวยากรณ์

3. วงเล็บเหลี่ยม [.. ] หมายถึงการผูกคุณสมบัติ
4. วงเล็บปีกกา (.. ) หมายถึงการผูกเหตุการณ์
5. เมื่อใส่วงเล็บเหลี่ยมและวงกลมเข้าด้วยกันเนื่องจาก [(.. )] หมายถึงการผูกแบบสองทางโดยทั่วไปเรียกว่ากล้วย

ดังนั้นเพื่อแก้ไขข้อผิดพลาดของคุณ

ขั้นตอนที่ 1:การนำเข้า FormsModule

import {FormsModule} from '@angular/forms'

ขั้นตอนที่ 2:เพิ่มเพื่อนำเข้าอาร์เรย์ของ AppModule ของคุณเป็นไฟล์

imports :[ ... , FormsModule ]

ขั้นตอนที่ 3:เปลี่ยนng-modelเป็น ngModel ด้วยกล่องกล้วยเป็น

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

หมายเหตุ:นอกจากนี้คุณสามารถจัดการการเชื่อมต่อฐานข้อมูลสองทางแยกกันได้ดังต่อไปนี้

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

valueChange(value){

}

ในกรณีของฉันฉันไม่มีแอตทริบิวต์ "name" ในองค์ประกอบอินพุตของฉัน

ตาม Angular2 สุดท้ายคุณไม่จำเป็นต้องนำเข้าFORM_DIRECTIVESตามที่หลายคนแนะนำไว้ข้างต้น อย่างไรก็ตามไวยากรณ์ได้รับการเปลี่ยนแปลงเนื่องจากkebab-case ถูกทิ้งเพื่อให้ดีขึ้น

เพียงแค่เปลี่ยนng-modelด้วยngModelและห่อไว้ในกล่องของกล้วย แต่ตอนนี้คุณได้ทำโค้ดออกเป็นสองไฟล์:

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

คำตอบที่ช่วยฉัน: คำสั่ง [(ngModel)] = ไม่ทำงานอีกต่อไปใน rc5

เพื่อสรุป: ตอนนี้ช่องป้อนข้อมูลต้องการคุณสมบัติnameในรูปแบบ

ใน app.module.ts

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

ต่อมาในการนำเข้าของมัณฑนากร @NgModule:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Angular 2 Beta

คำตอบนี้สำหรับผู้ที่ใช้Javascriptสำหรับ angularJS v.2.0 Beta

ที่จะใช้ในมุมมองของคุณคุณควรจะบอกคอมไพเลอร์เชิงมุมของที่คุณกำลังใช้คำสั่งที่เรียกว่าngModelngModel

อย่างไร?

ในการใช้ngModelมีสองไลบรารีใน angular2 Beta คือng.common.FORM_DIRECTIVESและng.common.NgModel.

จริงๆแล้วng.common.FORM_DIRECTIVESไม่มีอะไรนอกจากกลุ่มคำสั่งที่มีประโยชน์เมื่อคุณสร้างแบบฟอร์ม รวมถึงNgModelคำสั่งด้วย

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 คุณสามารถใช้รหัสนี้:

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

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

ภายใน app.component.ts ของคุณ

เพิ่มโค้ดด้านล่างในไฟล์ต่อไปนี้

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

หวังว่านี่จะช่วยได้

นำเข้า FormsModule ใน AppModule ของคุณเพื่อทำงานกับการผูกสองทาง [(ngModel)] กับไฟล์