Angular 2 hai chiều ràng buộc bằng cách sử dụng ngModel không hoạt động

Không thể liên kết với 'ngModel' vì nó không phải là thuộc tính biết của phần tử 'input' và không có lệnh nào phù hợp với thuộc tính tương ứng

Lưu ý: tôi đang sử dụng 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 đã phát hành phiên bản cuối cùng vào ngày 15 tháng 9. Không giống như Angular 1, bạn có thể sử dụng ngModelchỉ thị trong Angular 2 để liên kết dữ liệu hai chiều, nhưng bạn cần viết nó theo một cách khác một chút như [(ngModel)]( Cú pháp Banana in a box ). Hầu như tất cả các chỉ thị lõi của angle2 hiện không hỗ trợ kebab-casethay vào đó bạn nên sử dụng camelCase.

Bây giờ ngModelchỉ thuộc về FormsModule, đó là lý do tại sao bạn nên importcác FormsModuletừ @angular/formsmô-đun bên trong importstùy chọn của siêu dữ liệu AppModule(NgModule). Sau đó, bạn có thể sử dụng ngModelchỉ thị bên trong trang của mình.

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

Những điểm chính:

1. ngModel trong angle2 chỉ hợp lệ nếu FormsModule có sẵn như một phần của AppModule của bạn.

2. ng-model là sai về mặt cú pháp.

3. dấu ngoặc vuông [..] đề cập đến ràng buộc thuộc tính.
4. dấu ngoặc nhọn (..) đề cập đến ràng buộc sự kiện.
5. khi dấu ngoặc vuông và hình tròn được đặt cùng nhau như [(..)] đề cập đến hai cách ràng buộc, thường được gọi là hộp chuối.

Vì vậy, để khắc phục lỗi của bạn.

Bước 1: Nhập FormsModule

import {FormsModule} from '@angular/forms'

Bước 2: Thêm nó vào mảng nhập AppModule của bạn dưới dạng

imports :[ ... , FormsModule ]

Bước 3: Thay đổi ng-modellàm ngModel với hộp chuối làm

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

Lưu ý: Ngoài ra, bạn có thể xử lý dữ liệu hai cách riêng biệt cũng như bên dưới

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

valueChange(value){

}

Theo Angular2 cuối cùng, bạn thậm chí không phải nhập FORM_DIRECTIVESnhư đề xuất ở trên của nhiều người. Tuy nhiên, cú pháp đã được thay đổi vì kebab-case bị loại bỏ để cải thiện.

Chỉ cần thay thế ng-modelbằng ngModelvà bọc nó trong một hộp chuối . Nhưng bạn đã đổ mã vào hai tệp bây giờ:

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

Trong trường hợp của tôi, tôi đã thiếu thuộc tính "name" trên phần tử đầu vào của mình.

Câu trả lời đã giúp tôi: Chỉ thị [(ngModel)] = không hoạt động nữa trong rc5

Tóm lại: các trường đầu vào bây giờ yêu cầu namethuộc tính trong biểu mẫu.

Trong app.module.ts

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

Sau đó trong quá trình nhập trình trang trí @NgModule:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

Angular 2 Beta

Câu trả lời này dành cho những người sử dụng Javascript cho phiên bản Beta của angleJS v.2.0.

Để sử dụng ngModeltrong dạng xem của bạn, bạn nên nói với trình biên dịch của góc rằng bạn đang sử dụng một chỉ thị được gọi là ngModel.

Làm sao?

Để sử dụng, ngModelcó hai thư viện trong phiên bản Beta của angle2, chúng là ng.common.FORM_DIRECTIVESvà ng.common.NgModel.

Trên thực tế, ng.common.FORM_DIRECTIVESkhông có gì khác ngoài nhóm các lệnh rất hữu ích khi bạn tạo biểu mẫu. Nó cũng bao gồm NgModelchỉ thị.

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

});

nhập FormsModule trong AppModule của bạn để làm việc với liên kết hai chiều [(ngModel)] với

thay vì ng-model, bạn có thể sử dụng mã này:

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

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

bên trong app.component.ts của bạn

Thêm mã dưới đây vào các tệp sau.

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

Hi vọng điêu nay co ich