使用ngModel的Angular 2双向绑定不起作用

Question

无法绑定到'ngModel',因为它不是'input'元素的已知属性,并且没有匹配的指令和相应的属性

注意:即时通讯使用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);

Answer 1

Angular于9月15日发布了最终版本.与Angular 1不同,您可以ngModel在Angular 2中使用指令进行双向数据绑定,但您需要以不同的方式编写它[(ngModel)](如框中语法中的Banana).现在几乎所有angular2核心指令都不支持kebab-case你应该使用camelCase.

现在ngModel指令属于FormsModule,这就是为什么你应该import在(NgModule)元数据选项中的FormsModulefrom @angular/formsmodule模块.此后,您可以在页面上使用指令.importsAppModulengModel

应用程序/ 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.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);

演示Plunkr

Answer 2

关键点:

1. 仅当FormsModule作为AppModule的一部分可用时,angular2中的ngModel才有效.

2. ng-model 在语法错误.

3. square braces [..]指的是属性绑定.
4. circle braces(..)指的是事件绑定.
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){

}

Answer 3

就我而言，我的输入元素上缺少“名称”属性。

Answer 4

根据Angular2 final,您甚至不必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);

Answer 5

对我有帮助的答案： 指令 [(ngModel)]= 在 rc5 中不再工作

总结一下：输入字段现在需要name表单中的属性。

Answer 6

注意：为了让 ngModel 独立存在于反应式表单中，我们必须使用ngModelOptions，如下所示：

 [ngModelOptions]="{ standalone: true }"

例如 ：

 <mat-form-field appearance="outline" class="w-100">
            <input
              matInput 
              [(ngModel)]="accountType"
              [ngModelOptions]="{ standalone: true }"
            />
 </mat-form-field>