Data binding 使用ngModel的Angular 2双向绑定不起作用_Data Binding_Typescript_Angular_2 Way Object Databinding

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

data-binding typescript angular

Data binding 使用ngModel的Angular 2双向绑定不起作用,data-binding,typescript,angular,2-way-object-databinding,Data Binding,Typescript,Angular,2 Way Object Databinding,无法绑定到“ngModel”，因为它不是“input”元素的know属性，并且没有与相应属性匹配的指令注意：我使用alpha.31 import { Component, View, bootstrap } from 'angular2/angular2' @Component({ selector: 'data-bind' }) @View({ template:` <input id="name" type="text" [

无法绑定到“ngModel”，因为它不是“input”元素的know属性，并且没有与相应属性匹配的指令

注意：我使用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);

从'angular2/angular2'导入{组件、视图、引导程序}
@组成部分({
选择器：“数据绑定”
})
@看法({
模板：`
{{name}}
` 
})
类数据绑定{
名称：字符串；
构造函数（）{
this.name='Jose'；
}
}
引导（数据绑定）；

Angular于9月15日发布了最终版本。与Angular 1不同，您可以在Angular 2中使用

ngModel

指令进行双向数据绑定，但您需要以稍微不同的方式编写它，如

[（ngModel）]

（香蕉盒子语法）。几乎所有angular2核心指令都不支持

kebab案例

，现在您应该使用

camelCase

现在

ngModel

指令属于

FormsModule

，这就是为什么您应该

import

从

@angular/forms

模块中导入

FormsModule

（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;
}

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

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

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

<input type="text" [(ngModel)]="fname" >
{{fname}}
export class appcomponent {
fname:any;
}

import {FormsModule} from '@angular/forms';
@NgModule({
imports: [ BrowserModule,FormsModule ],
declarations: [ AppComponent],
bootstrap:    [ AppComponent ]
})

角度2β
这个答案适用于那些在angularJS v.2.0测试版中使用Javascript的人
要在视图中使用ngModel
，您应该告诉angular的编译器您正在使用一个名为ngModel
的指令
怎么做？
要使用ngModel
在angular2 Beta中有两个库，它们是ng.common.FORM\u指令
和ng.common.ngModel

实际上，ng.common.FORM_指令
只是一组指令，在创建表单时非常有用。它还包括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";
    },

});

根据Angular2 final，您甚至不必像上面许多人建议的那样导入FORM_指令
。然而，为了改进，语法已经改变了
只需将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';
  }
}

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

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

帮助我的答案是：

总而言之：输入字段现在需要表单中的属性name
。
您可以使用以下代码代替ng模型：
import { Component } from '@angular/core';

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

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
{{box.value}}`，
})
导出类AppComponent{}

在app.component.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';
  }
}

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

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

仅当FormsModule作为AppModule的一部分可用时，angular2中的ngModel才有效
ng模型
语法错误
方括号[…]指的是属性绑定
大括号（..）表示事件绑定
当方括号和圆括号放在一起时，[（…）]指的是双向绑定，通常称为香蕉盒
所以，要修正你的错误
步骤1:导入表单模块
import {FormsModule} from '@angular/forms'

第2步：将其添加到AppModule的imports数组中，如下所示：
imports :[ ... , FormsModule ]

第3步：将ng型号更改为ngModel，香蕉盒为
 <input id="name" type="text" [(ngModel)]="name" />



注意：此外，您还可以单独处理双向数据绑定，如下所示
<input id="name" type="text" [ngModel]="name" (ngModelChange)="valueChange($event)"/>

valueChange(value){

}


值更改（值）{
}
在app.module.ts中
import { FormsModule } from '@angular/forms';

稍后在@NgModule decorator的导入中：
@NgModule({
imports: [
BrowserModule,
FormsModule
]

})

将以下代码添加到以下文件中
应用程序组件.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;
}

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

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

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

<input type="text" [(ngModel)]="fname" >
{{fname}}
export class appcomponent {
fname:any;
}

import {FormsModule} from '@angular/forms';
@NgModule({
imports: [ BrowserModule,FormsModule ],
declarations: [ AppComponent],
bootstrap:    [ AppComponent ]
})

希望这能有所帮助
在我的情况下，我的输入元素缺少一个“name”属性。
在AppModule中导入FormsModule以使用双向绑定[（ngModel）]，对于较新版本的Angular：
-把它写成[（ngModel）]=yourSearch


在.ts
文件中声明名为yourSearch
的空变量（属性）

在-@angular/forms的app.module.ts
文件中添加FormsModule


如果应用程序正在运行，则在对其module.ts
文件进行更改时重新启动它

注意：为了允许ngModel独立存在于反应式表单中，我们必须使用ngModelOptions如下：
 [ngModelOptions]="{ standalone: true }"

例如：
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';
  }
}

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

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

这些东西缺失/错误：

在模块的导入数组中导入FormsModule（ngModel需要FormsModule）
ngModel写为：[（ngModel）]=“modelName”

这样，它会很好地工作
 仅供参考，NgModel采用FORM_指令，因此您还可以：指令：[ng.common.FORM_指令]@PeterJ.Hart，实际上ng.common.NgModel
包含指令的防御NgModel
ng.common.FORM_指令
是对一些指令进行分组，包括ngModel
，这些指令在表单中很有用。因此，我们不想包含表单的每个指令，只需包含ng.common.form_指令
是的，我也有同样的问题。我把name属性放在input和worked中，实际情况如何？为什么它甚至需要这个属性？这是我最意想不到的解决方案。如果可能，请努力提供额外的解释，而不仅仅是代码。这些答案往往更有用，因为它们帮助社区成员，特别是新开发人员更好地理解解决方案的推理，并有助于防止需要解决后续问题。