typescript - Angular 2 liên kết hai chiều 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à một thuộc tính biết của phần tử 'input' và không có chỉ thị phù hợp nào 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);

Câu trả lời #1

Angular đã phát hành phiên bản cuối cùng vào ngày 15 tháng 9. Khác với Angular 1, bạn có thể sử dụng directive ngModel trong Angular 2 để liên kết dữ liệu hai chiều, nhưng bạn cần viết nó theo cách hơi khác như [(ngModel)] (cú pháp Banana in a box). Hầu hết các directive cốt lõi của Angular 2 hiện nay không hỗ trợ kebab-case, thay vào đó bạn nên sử dụng camelCase.

Hiện tại, ngModel directive thuộc về FormsModule, đó là lý do bạn nên import FormsModule từ module @angular/forms bên trong tùy chọn metadata imports của AppModule (NgModule). Sau đó, bạn có thể sử dụng ngModel directive bên trong trên trang của bạn.

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

Câu trả lời #2

Điểm chính:

1. ngModel trong Angular2 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 về mặt cú pháp là sai.

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

Vì vậy, để sửa 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 imports của AppModule của bạn như

imports :[ ... , FormsModule ]

Bước 3: Thay đổi ng-model thành ngModel với banana boxes như

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

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

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

valueChange(value){

}

Câu trả lời số 3

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