为了账号安全,请及时绑定邮箱和手机立即绑定

使用ngModel的Angular 2两种方式绑定不起作用

使用ngModel的Angular 2两种方式绑定不起作用

炎炎设计 2019-12-12 14:10:44
无法绑定到“ ngModel”,因为它不是“ input”元素的已知属性,并且没有与相应属性匹配的指令注意:即时通讯使用alpha.31import { 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);
查看完整描述

4 回答

?
jeck猫

TA贡献1909条经验 获得超7个赞

Angular已于9月15日发布了最终版本。与Angular 1不同,您可以ngModel在Angular 2中使用指令进行两种方式的数据绑定,但是您需要以一些不同的方式来编写它,例如[(ngModel)](Banana in a box语法)。现在几乎所有的angular2核心指令都不支持,kebab-case而应该使用camelCase。


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


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



查看完整回答
反对 回复 2019-12-13
?
慕侠2389804

TA贡献1719条经验 获得超6个赞

关键点:


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


ng-model 在语法上是错误的。


方括号[..]表示属性绑定。

圆括号(..)表示事件绑定。

当方括号和圆括号放在一起时,[[..]]表示双向绑定,通常称为香蕉盒。

因此,修复您的错误。


步骤1:导入FormsModule


import {FormsModule} from '@angular/forms'

第2步:将其添加到AppModule的import数组中,作为


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


}



查看完整回答
反对 回复 2019-12-13
  • 4 回答
  • 0 关注
  • 492 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信