Angular实现数据双向绑定

如果你了解Vue，那你就会习惯于Vue的数据双向绑定MVVM的模式，那么在Angular中能不能实现双向绑定呢？答案当然是可以的。

第一步：在app.module.ts文件中引入FormsModule模块，然后将导入的FormsModule在imports中进行使用！

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';// 只有引入了FormsModule才能实现数据双向绑定
import { FormsModule } from '@angular/forms';  import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './pages/home/home.component';@NgModule({declarations: [AppComponent,HomeComponent],imports: [BrowserModule,AppRoutingModule,FormsModule  //使用FormsModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

第二步：在组件中使用

组件 html

<input [(ngModel)]="dva" />
<span>{{dva}}</span>

组件 ts

public dva: any = "双向数据绑定";

这样即可实现数据双向绑定！
此功能常使用在form表单中！

在ts中，获取dva的值，通过 this.dva 获取即可。

Angular实现数据双向绑定相关推荐

angular的数据双向绑定
以前我们通过jquery操作DOM可以实现数据绑定,但这样会使操作量加大,而在angular中可以轻松的实现数据双向绑定.数据双向绑定指的是数据改变,相应的视图发生改变,而用户操作视图,底层数据会发生 ...
angular.copy() 取消angular的数据双向绑定
网址:https://www.tslang.cn/docs/tutorial.html
Angular数据双向绑定
本文转载自: http://www.cnblogs.com/jingwhale/p/5117419.html 作者:jingwhale 转载请注明该声明. Angular数据双向绑定 AngularJ ...
Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
EngJS(超轻量) 中数据双向绑定如何使用
Eng github 所有支持数据双向绑定的js工具 ,触发双向关系的基本方式无外乎 wather关系和事件关系两种 . 前者操作数据时 ,后者触发事件时. 下面简单的介绍Eng 中的 w ...
AngularJS（2）——AngularJS数据双向绑定
双向绑定 AngularJS在$scope变量中使用脏值检测来实现了数据双向绑定. Scope作用: 1.通过数据共享连接Controller和View 2.事件的监听和响应 3.脏值检测和数据绑 ...
前端笔记之微信小程序（二）{{}}插值和MVVM模式数据双向绑定指令API
一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...
双向绑定当obj的值修改时_JavaScript进阶之深入理解数据双向绑定
前言谈起当前前端最热门的 js 框架,必少不了 Vue.React.Angular,对于大多数人来说,我们更多的是在使用框架,对于框架解决痛点背后使用的基本原理往往关注不多,近期在研读 Vue.js ...

Angular实现数据双向绑定

Angular实现数据双向绑定相关推荐

最新文章

热门文章