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

时间:2015-07-25 07:01:49

标签: data-binding typescript angular 2-way-object-databinding

无法绑定到' 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);

13 个答案:

答案 0 :(得分:124)

Angular已于9月15日发布最终版本。与Angular 1不同,您可以在Angular 2中使用extension String { var wordList:[String] { return "".join(componentsSeparatedByCharactersInSet(NSCharacterSet.punctuationCharacterSet())).componentsSeparatedByString(" ") } var first: String { return String(self[startIndex]) } var last: String { return String(self[endIndex.predecessor()]) } var scrambleMiddle: String { if count(self) < 4 { //'(String) -> _' is not identical to 'Int' return self } return first + String(Array(dropLast(dropFirst(self))).shuffled) + last //Type 'String' does not conform to protocol 'Sliceable' } } 指令进行双向数据绑定,但是您需要以与ngModel不同的方式编写它( Banana in a box syntax )。现在,几乎所有angular2核心指令都不支持[(ngModel)],而应使用kebab-case

  

现在camelCase指令属于ngModel,这就是FormsModule来自import FormsModule模块@angular/forms内部imports元数据选项的原因AppModule {1}}(NgModule)。此后,您可以在页面内使用ngModel指令。

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

Demo Plunkr

答案 1 :(得分:32)

要点:

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

  2. module: commonjs在语法上是错误的。

  3. square braces [..]指的是属性绑定。
  4. circle braces(..)指的是事件绑定。
  5. 当方形和圆形括号放在一起时,[(..)]指的是双向装订,通常称为香蕉盒。
  6. 所以,要解决你的错误。

    第1步:导入FormsModule

    ng-model

    第2步:将其添加到AppModule的导入数组中

    import {FormsModule} from '@angular/forms'
    

    第3步:imports :[ ... , FormsModule ] 更改为带有香蕉盒的ngModel

    ng-model

    注意:另外,您可以单独处理双向数据绑定以及

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

答案 2 :(得分:8)

根据Angular2 final,您甚至不必按照上面的建议导入FORM_DIRECTIVES。但是,语法已更改为kebab-case was dropped以获得更好的效果。

只需将ng-model替换为ngModel,然后将其换成a box of bananas。但是你现在已经将代码分成两个文件了:

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

答案 3 :(得分:3)

Angular 2 Beta

此答案适用于对于angularJS v.2.0 Beta使用 Javascript 的人。

要在视图中使用ngModel,您应该告诉角度编译器您正在使用名为ngModel的指令。

如何吗

要使用ngModel,angular2 Beta中有两个库,它们是ng.common.FORM_DIRECTIVESng.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";
    },

});

答案 4 :(得分:2)

在app.module.ts

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

后来在@NgModule装饰器的导入中:

@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

答案 5 :(得分:2)

注意:为了让 ngModel 独立存在于响应式表单中,我们必须使用 ngModelOptions 如下:

 [ngModelOptions]="{ standalone: true }"

例如:

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

答案 6 :(得分:1)

帮助我的答案: The directive [(ngModel)]= not working anymore in rc5

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

答案 7 :(得分:0)

代替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

里面

答案 8 :(得分:0)

将以下代码添加到以下文件中。

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

希望这会有所帮助

答案 9 :(得分:0)

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

答案 10 :(得分:0)

在您的AppModule中导入FormsModule以与您的

进行两种方式绑定[[ngModel)]

答案 11 :(得分:0)

对于较新版本的angular-

  1. 将其写为[(ngModel)] = yourSearch

2。在.ts文件中声明一个名为yourSearch的空变量(属性)

  1. 将app.module.ts文件中的FormsModule添加到-'@ angular / forms';

  2. 如果您的应用程序正在运行,请在对其module.ts文件进行更改后重新启动它

答案 12 :(得分:0)

这些东西缺失/错误:

  • 在导入模块数组中导入FormsModule(ngModel 需要FormsModule)
  • ngModel 写成:[(ngModel)]="modelName"

这样,它会正常工作!