开发者社区> 华章计算机> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Angular从零到一2.3 双向数据绑定

简介:
+关注继续查看

2.3 双向数据绑定


接下来的问题是我们是否只能通过这种方式进行表现层和逻辑之间的数据交换呢?如果我们希望在组件内对数据进行操作后再反馈到界面应该怎么处理呢?Angular 2提供了一个双向数据绑定的机制。这个机制是这样的,在组件中提供成员数据变量,然后在模板中引用这个数据变量。我们来改造一下login.component.ts,首先在class中声明两个数据变量username和password:

username = "";

password = "";

然后去掉onClick方法的参数,并将内部的语句改造成如下样子:

console.log('auth result is: '

      + this.service.loginWithCredentials(this.username, this.password));

去掉参数的原因是双向绑定后,我们通过数据成员变量就可以知道用户名和密码了,不需要再传递参数了。而成员变量的引用方式是this.成员变量。 然后我们来改造模板:

<div>

  <input type="text"

    [(ngModel)]="username"

    />

  <input type="password"

    [(ngModel)]="password"

    />

  <button (click)="onClick()">Login</button>

</div>

[(ngModel)]=”username”这个看起来很别扭,稍微解释一下,方括号[]的作用是说把等号后面当成表达式来解析而不是当成字符串,如果我们去掉方括号那就等于说是直接给这个ngModel赋值成“username”这个字符串了。方括号的含义是单向绑定,就是说我们在组件中给model赋的值会设置到HTML的input控件中。

[()]是双向绑定的意思,就是说HTML对应控件的状态改变会反射设置到组件的model中。ngModel是FormModule中提供的指令,它负责从Domain Model(这里就是username或password,以后我们可以绑定更复杂的对象)中创建一个FormControl的实例,并将这个实例和表单的控件绑定起来。

同样,对于click事件的处理,我们不需要传入参数了,因为其调用的是刚刚我们改造的组件中的onClick方法。现在我们保存文件后打开浏览器看一下,效果和上一节的应该一样。本节的完整代码如下:

//login.component.ts

import { Component, OnInit, Inject } from '@angular/core';

 

@Component({

  selector: 'app-login',

  template: '

    <div>

      <input type="text"

        [(ngModel)]="username"

        />

      <input type="password"

        [(ngModel)]="password"

        />

      <button (click)="onClick()">Login</button>

    </div>

  ',

  styles: []

})

export class LoginComponent implements OnInit {

 

  username = '';

  password = '';

 

  constructor(@Inject('auth') private service) {

  }

 

  ngOnInit() {

  }

 

  onClick() {

    console.log('auth result is: '

      + this.service.loginWithCredentials(this.username, this.password));

  }

 

}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ZZULIOJ-1004,三位数的数位分离(Java)
ZZULIOJ-1004,三位数的数位分离(Java)
48 0
Angular双向绑定的一个例子
Angular双向绑定的一个例子
35 0
java jdbc 操作 blob 类型的数据
java jdbc 操作 blob 类型的数据
125 0
AngularJs-03-数据的双向绑定
<!DOCTYPE html> <html lang="zh" ng-app="myapp"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.
1127 0
Angular2生命周期钩子函数
Angular每个组件都存在一个生命周期,从创建,变更到销毁。Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力,掌握生命周期,可以让我们更好的开发Angular应用 概述 每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上ng前缀构成的。
986 0
基于Angular创建后台数据模拟(译)
这篇文章给了我们一个用angularjs做前后端分离开发的时候解决数据问题的方案
4930 0
Blend基础-数据绑定
Blend基础-数据绑定数据绑定 什么是数据绑定 将属性和值联系到一起 属性 控件、动画、文件、富媒体等都是有属性的,比如颜色属性、宽度、高度属性、可见度属性等...... 值 值是可有有很多种类型的,比如颜色值(#000000)、数字、真假、字符串等...... 这里所说的值也就是指的数据。
665 0
10057
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载