解决angular2在双向数据绑定时[(ngModel)]无法使用的问题

angular2在双向数据绑定时[(ngModel)]无法使用，出现的错误是：

Can't bind to 'ngModel' since it isn't a known property of 'input'.

解决办法：

在文件 app.component.ts 中引入ngModel

具体为：

添加两行代码：

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

和

FormsModule,

位置如下：

以上这篇解决angular2在双向数据绑定时[(ngModel)]无法使用的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular2实现自定义双向绑定属性

    整理文档,搜刮出一个Angular 2实现自定义 双向绑定 属性的代码,稍微整理精简一下做下分享. import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core'; @Component({ selector: 'twoway', template: ` <input [(ngModel)]="username"> <p>Hello {{username}}!</

  • Angular 2.0+ 的数据绑定的实现示例

    这两天学习了Angular感觉 数据绑定这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 前言 我们使用如下的组件代码进行本文的所有演示 export class AppComponent { angularLogo = 'https://angular.io/assets/images/logos/angular/angular.svg'; userName="David"; newItem() { console.log("Hello world!"

  • AngularJS 双向数据绑定详解简单实例

    AngularJS 双向数据绑定详解简单实例

    angular的双向数据绑定,个人理解是,通过model建立数据模型,那么视图上的数据就会对应存储在angular程序里,视图上的数据变化会同步到model,model的数据改变也会同步到视图. 下面的demo演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello, AngularJS!</titl

  • Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法

    "对呀对呀!--回字有四样写法,你知道么?",当时鲁大大如此讽刺孔乙己,意味着老孔这个被科举制毒害的人注意此种无用之物实在可悲.但是在Angular 2的世界中,很少存在无用之物,ngModel有三种写法,你知道吗? 表单的设计永远都是应用的重头戏,而其中最基本的功能点即是通过一个个输入组件实现的,为此Angular 2为我们提供了锋利的武器:ngModel.而其不同的使用方式有着大不相同的作用: ngModel 如果单独使用ngModel,且没有为其赋值的话,它会在其所在的ngFor

  • Angular2数据绑定详解

    Angular2数据绑定详解

    大致介绍 Angular2中数据绑定的方式默认是以单向方式,数据绑定的方式可以分为: 1.属性绑定和插值表达式 组件类-> 模板 2.事件绑定:模板 -> 组件类 3.双向绑定: 模板 <-> 组件类 事件绑定 事件绑定是把模板中的事件绑定到组件类中的方法上,例如在一个组件中的HTML代码是: <p> <a (click)="doClick($event)">点我</a> </p> (click)表示要进行的操作,

  • 解决angular2在双向数据绑定时[(ngModel)]无法使用的问题

    angular2在双向数据绑定时[(ngModel)]无法使用,出现的错误是: Can't bind to 'ngModel' since it isn't a known property of 'input'. 解决办法: 在文件 app.component.ts 中引入ngModel 具体为: 添加两行代码: import { FormsModule } from '@angular/forms'; 和 FormsModule, 位置如下: 以上这篇解决angular2在双向数据绑定时[(

  • JavaScript中双向数据绑定详解

    双向数据绑定指的是将对象属性变化绑定到UI,或者反之.换句话说,如果我们有一个拥有name属性的user对象,当我们给user.name赋予一个新值是UI也会相应的显示新的名字.同样的,如果UI包括了一个输入字段用来输入用户名,输入一个新的值会导致user对象中的那么属性发生变化. 许多流行的客户端JavaScript框架例如Ember.js,AngularJS以及KnockoutJS都将双向数据绑定作为自己的头号特性.但是这并不意味着从零开始实现双向数据绑定就很困难,同样的当我们需要双向数据绑

  • angular4自定义组件非input元素实现ngModel双向数据绑定的方法

    在angular里我们一般都是给input元素添加[(ngModel)]="value"实现数据双向绑定,如果想实现自定义的组件上实现ngModel双向数据绑定应该怎么办呐... 网上找了一下,没看懂记录一下. 场景:组件能获取父组件通过ngModel绑定的值,能通过ngModel改变父组件对应的数据.如下代码: <app-child [(ngModel])="appData"></app-child> 1.先贴出效果图: 2.下面是app-

  • angularjs学习笔记之双向数据绑定

    这次我们来详细讲解angular的双向数据绑定. 一.简单的例子 这个例子我们在第一节已经展示过了,要看的移步这里 这里实现的效果就是,在输入框输入内容,下面也会相应的改变对应的内容.这就实现了数据双向绑定. 二.取值表达式与ng-bind的使用 我们再看一个例子,点击这里,文中出现的第一个例子中,{{greeting.text}}和{{text}}就是一个取值表达式了,但是如果你一直刷新页面,你会发现这样一个问题,那就是页面有时候会一瞬间的出现"{{greeting.text}} {{text

  • AngularJS双向数据绑定原理之$watch、$apply和$digest的应用

    引子 这篇文章是写给AngularJS新手的,如果你已经对AngularJS的双向数据绑定有了深入的了解,直接去阅读源代码好了. 背景 AngularJS开发者都想知道双向数据绑定是怎么实现的.与data-binding相关的术语琳琅满目: $watch,$apply,$digest,dirty-checking等等它们是如何工作的呢?让我们从头开始讲起吧 AngularJS 的双向数据绑定是被浏览器逼的 浏览器看上去很美,其实在数据交互这块儿,由于浏览器的"不作为",导致浏览器的数据

  • AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】

    AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】

    本文实例讲述了AngularJS框架双向数据绑定机制.分享给大家供大家参考,具体如下: 之前写的一篇<AngularJS入门示例之Hello World详解> ,介绍ng-model的时候提到:使用AngularJS的双向数据绑定机制,不需要我们编写繁琐的代码来实现同样的功能.现在我们看一个比较震撼的例子,看看angularJS是如何减少我们在前端开发中的繁琐劳动的.越是感受到框架功能的强大,越是能够激发学习的兴趣和动力. 假如我们有一个学生信息列表,包含学生的姓名.地址和年龄信息.假如这个数

  • Angularjs 双向绑定时字符串的转换成数字类型的问题

    Angularjs 双向绑定时字符串的转换成数字类型的问题

    问题: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myAp

  • 浅谈Angularjs中不同类型的双向数据绑定

    Angularjs1.X中两种不同的双向数据绑定 聊聊 Angularjs1.x中那些活见鬼的事情. 一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从html流向controller 也就是从 视图层 流向 模型层 ,原生html中需要使用表单元素(例如 input 标签)来收集用户输入信息,Angularjs中通过在表单元素上使用 ng-model

  • vue中的双向数据绑定原理与常见操作技巧详解

    本文实例讲述了vue中的双向数据绑定原理与常见操作技巧.分享给大家供大家参考,具体如下: 什么是双向数据绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也是算是vue的精髓之处了.值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提,如果我们使用vuex,那么数据流也是单向的,这时就会和双向数据绑定有冲突,我们可以这么解决.

  • vue2与vue3双向数据绑定的区别说明

    目录 vue2与vue3双向数据绑定区别 Vue2双向数据绑定存在的问题 原理 vue3.0双向数据绑定Proxy vue语法:数据的双向绑定 1.指令v-model 2.v-model与修饰符 3.v-model与自定义组件 vue2与vue3双向数据绑定区别 新的响应式机制采用了ES6的ProxyApi,抛弃了Object.defineProperty() Vue2双向数据绑定存在的问题 关于对象: Vue 无法检测 property 的添加或移除.由于 Vue 会在初始化实例时对prope

随机推荐