Angular4.0从入门到实战打造在线竞拍网站学习笔记之四--数据绑定管道
Angular4.0基础知识之组件
Angular4.0基础知识之路由
Angular4.0依赖注入
Angular4.0数据绑定&管道
数据绑定
数据绑定允许你将组件控制器的属性和方法与组件的模板连接起来,大大降低了开发时的编码量。
常见的表现形式有:
- 插值表达式:
<h1>{{title}}</h1>
,即把属性|表达式插入到HTML标签中 - 属性绑定:
<img [src]="imgUrl" />
,也就是将属性|表达式绑定到HTML标签的属性上 - 事件绑定:
<button (click)="show()"></button>
,讲组件控制器的一个方法绑定到模板元素的事件上
在Angular中,默认的数据绑定是单向的(AngularJS1.0中全部是双向绑定,这也是性能差的原因之一),所谓的双向绑定,也就是控制器的属性反映到模板中,同时,模板中显示出的属性被修改之后,对应的控制器属性同时发生变化;单向绑定取出了模板=>控制器的方向,使性能大大提升。(当然,双向绑定并不是被去掉了,你也可以手动指定使用双向绑定,双向绑定现在变成了一个可选项,而不是框架的默认行为)
事件绑定
<button (click)="doOnClick($event)"></button>
doOnClick(event:any){console.log(event);
}
如上代码是一个经典的事件绑定例子,被绑定的事件可以是一个标准事件也可以是一个自定义事件,绑定的操作可以是控制器里的一个方法,也可以只一个赋值表达式等等。
属性绑定
如下例子所示
// 使用属性绑定
<img [src]="imgUrl" />
// 使用插值表达式
<img src="{{imgUrl}}" />
又是一个经典的例子,不难理解,上面两个方法实现的效果是完全一致的,事实上,这两个方法没有优劣之分,你只需要按照自己的喜好去选择即可
HTML属性绑定
- 基本HTMl属性绑定
<td [attr.colspan]="value"></td>
- class绑定
<div class="aaa bbb" [class]="val"></div> // 这种情况会覆盖原先的class
<div [class.aaa]="booleanVal"></div> // 通过一个Boolean值开关来控制是否启用某一个class名,适合管理单一class名
<div [ngClass]="{aaa:isA,bbb:isB}"></div> // 通过对象的形式开控制多个class的开关,适合同时管理多个className
- 样式绑定
和class绑定类似,只不过绑定的对象为style属性
<button [style.color]="isRed?'red':'green'">Red</button>
<div [ngStyle]="{color:red,'font-style':bool?'italic':'normal'}"></div>
双向绑定
双向绑定即视图和模型保持同步,无论视图和模型哪一方改变,另一方都一起同步改变。
前面所学到的事件绑定是从视图到模型,把模板中元素的事件绑定到控制器中的方法;属性绑定的方向是从控制器到模板,使用方括号讲组件控制器的属性绑定到模板。
<input [value]="name" (input)="doOnInput($event)" />
export class BindComponent implements OnInit {name: string;doOnInput(event){this.name=event.target.value;}
}
这样就实现了一个双向绑定,当input内容变化的时候,出发事件,修改模型中的属性值,当模型中的属性值改变的时候,优惠在视图中表现出来。
当然,Angular肯定提供了内置的双向绑定支持:
<input [(ngModel)]="name" />
由于[(ngModel)]
用在input元素上,默认绑定的是input
事件。双向绑定最常用的用途就是表单处理。
当然,双向绑定本来就应该用于input系列元素上,因为这些元素允许你去修改这些值,并显示出来。
将会在表单处理章节更详细讲。
管道
举个例子,例如我要在页面上显示我的生日信息,假设现在从服务器获取到的日期是一个Date对象,那么把它直接输出到页面上肯定是用户体验很不好的(一大串乱七八糟的字符串)。管道就是用来处理数据的,从原始值到你所需要的值,这一个过程。
使用实例:
<p>{{birthday | date | uppercase}}</p>
上面例子中我们就使用了两个内置的管道,第一个是获取到Date对象的日期信息,第二个是把小写字母转换成大写。
内置管道
常用的管道:
- uppercase 大写
- lowercase 小写
date日期管道
日期管道符可以接受参数,用来规定输出日期的格式。
<p>现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>
number 数字处理管道
接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
其中最少整数位数默认为1
最少小数位数默认为0
最多小数位数默认为3
当小数位数少于规定的{最少小数位数}时,会自动补0
当小数位数多于规定的{最多小数位数}时,会四舍五入
自定义管道
- 生成管道:
ng g pipe pipe/multiple
,此处用来做Demo的管道作用是扒一个数放大n倍,也就是乘法……
生成的管道代码:
import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'multiple'
})
export class MultiplePipe implements PipeTransform {transform(value: any, args?: any): any {return null;}}
可以看出,管道是一个实现了PipeTransform并且带有@Pipe装饰器的类,用于把源数据根据参数和方法定义处理成想要的结果。
但是,当你打开
app.modules.ts
的时候,你会发现在declaration数组里多出来了一个MultiplePipe的声明,也就是说,管道也是需要声明的,只是命令行工具自动添加进去了。
其中value是管道前端的原始值,args是一个可选参数,也就是管道的参数,最终管道把处理结果返回出去即可。
如下,我们很轻易地创建了一个管道:
import {Pipe, PipeTransform} from '@angular/core';@Pipe({name: 'multiple'
})
export class MultiplePipe implements PipeTransform {transform(value: number, args?: number): number {if (!args) {args = 1;}return value * args;}}
在实战项目中,我们对管道有了新的用法,根据传入的参数来过滤商品列表:
import {Pipe, PipeTransform} from '@angular/core';
import {Product} from '../shared/product.service';@Pipe({name: 'productFilter'
})
export class ProductFilterPipe implements PipeTransform {transform(productList: Product[], filterField: string, keyword: string): any {if (!filterField || !keyword) {return productList;}return productList.filter((product: Product) => product[filterField].indexOf(keyword) >= 0);}}
转载于:https://www.cnblogs.com/wxjblog/p/7277655.html
Angular4.0从入门到实战打造在线竞拍网站学习笔记之四--数据绑定管道相关推荐
- Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟
最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 先上个效果图: 环境&版本信息声明 运行ng -v @ ...
- 《Python编程:从入门到实战》(第2版)学习笔记 第5章 if语句
[写在前面]为进一步提高自己的python代码能力,打算把几本经典书籍重新过一遍,形成系统的知识体系,同时适当记录一些学习笔记,我尽量及时更新!先从经典的<Python编程:从入门到实战> ...
- Class3 打造在线编程环境学习笔记
Class3 打造在线编程环境学习笔记 关于服务器管理软件 安装Docker容器环境 部署Web IDE 使用Web IDE 本文主要是记录自己在学习阿里云高校计划七天学习计划的第三天任务:如何打造在 ...
- Swoole入门到实战打造高性能赛事直播平台(完整版)
Swoole入门到实战打造高性能赛事直播平台(技术分享交流) 下载地址:https://download.csdn.net/download/lxw1844912514/11451621
- 【Angular 4.0】在线竞拍网站开发
[Angular 4.0]在线竞拍网站开发 下载地址:百度网盘
- 2019最新【Angular 4.0】在线竞拍网站开发
Angular 4.0]在线竞拍网站开发 下载地址:百度网盘
- Python语言入门这一篇就够了-学习笔记(十二万字)
Python语言入门这一篇就够了-学习笔记(十二万字) 友情提示:先关注收藏,再查看,12万字保姆级 Python语言从入门到精通教程. 文章目录 Python语言入门这一篇就够了-学习笔记(十二万字 ...
- javascript从入门到跑路-----小文的js学习笔记(25)------运动框架----匀速运动、缓冲运动、多物体运动、链式运动
** javascript从入门到跑路-----小文的js学习笔记(1)---------script.alert.document.write() 和 console.log 标签 javascri ...
- 蓝桥杯备考——算法竞赛入门经典(第2版)学习笔记2
算法竞赛入门经典(第2版)学习笔记2 第二章 循环结构程序设计 2.1 for循环 2.2 while 循环和do-while 循环 2.3 循环的代价 2.4 算法竞赛中的输入输出框架 2.5 注解 ...
最新文章
- 厦门大学宋宁宇:统计学专业到蚂蚁风控岗!
- poj-1031-fence(不是我写的,我只是想看着方便)
- 一元多项式的乘法与加法运算_行测数学运算之速算与技巧
- linux中配置DHCP基本操作
- CAN接口芯片SN65HVD230DR波形
- shell编写mysql启动脚本文件夹_linux 编写一个shell脚本文件,实现以下功能
- 如何使用strace+pstack利器分析程序性能
- 姑苏山塘飞雪披银装[组图]
- 区块链开发公司浅析区块链服务商提供哪些解决方案
- 数据库lib7第2, 3题(创建索引和触发器)
- 做了一款股票复盘工具
- APISpace 标准中文电码查询API
- 嵌入式软件设计(freertos使用)
- Photoshop CC2019安装教程
- C语言---内存操作及基础知识
- 疯狂填词 mad_libs 第9章9.9.2
- 数据分析项目实战——Airbnb数据分析
- Python第三方库turtle画小人发射爱心
- JAVA知识两百问(181~200)
- 亿佰特LoRaWAN入网TTN并订阅MQTT消息
热门文章
- cartographer 配置过程
- Php中数组sort举例,php数组排序之krsort与asort函数应用举例
- 2020卫星参数表大全_王者荣耀比较秀的名字 2020年比较骚气比较浪的王者荣耀名字大全...
- 将字符型的数字转化为整型
- linux内核路由反向检查,Linux非对称路由
- php 抽象类 接口 区别,PHP中抽象类、接口的区别与选择分析
- ue4 曲线图实现 蓝图_UE4蓝图解析(一)
- C语言面试题-这些简单的你能很快的写出来吗?
- Python 骚操作:微信远程控制电脑
- PCA(Principal Component Analysis)的原理、算法步骤和实现。