Angular语法(三)——数据绑定
2024-08-31 23:26:54
绑定类型
绑定类型可以按照数据流的方向分为三类:从源到视图,从视图到源,以及双向序列
示例
<!-- Bind button disabled state to `isUnchanged` property -->
<button [disabled]="isUnchanged">Save</button>
绑定对象
Property binding
<img [src]="heroImageUrl">
<img bind-src="heroImageUrl">
<div [ngClass]="classes">[ngClass] binding to the classes property</div>
不要忘记方括号
正确的写法
<app-hero-detail [hero]="currentHero"></app-hero-detail>
错误的写法
<!-- ERROR: HeroDetailComponent.hero expects a
Hero object, not the string "currentHero" -->
<app-hero-detail hero="currentHero"></app-hero-detail>
HeroDetail组件的hero属性需要一个Hero对象,这正是您在属性绑定中发送的内容:括号告诉Angular评估模板表达式。
如果省略方括号,Angular会将该字符串视为常量并使用该字符串初始化目标属性。
属性绑定还是插值?
下面写法等效
<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p> <p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
Attribute, class, and style bindings
Attribute binding
错误的写法
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
报错
Template parse errors:
Can't bind to 'colspan' since it isn't a known native property
正确的写法
<!-- expression calculates colspan=2 -->
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
Class binding
不使用bind
<div class="bad curly special">Bad curly special</div>
使用bind
<!-- reset/override all class names with a binding -->
<div class="bad curly special"
[class]="badCurly">Bad curly</div>
Style binding
Style binding语法类似于Property binding。 代替括号内的元素属性,从前缀样式开始,后跟一个点(.)和一个CSS样式属性的名称:[style.style-property]
<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>
一些样式有一个单位扩展名。
<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>
Event binding
两种写法
<button (click)="onSave()">Save</button>
<button on-click="onSave()">On Save</button>
<input [value]="currentHero.name"
(input)="currentHero.name=$event.target.value" >
还可以自定义Event
Two-way binding ( [(...)] )
Angular为双向绑定提供了一种特殊的双向数据绑定语法,[(x)]。 [(x)]语法将属性绑定的括号[x]与事件绑定的括号(x)组合在一起。
[( )] = BANANA IN A BOX
香蕉在一个盒子里
在盒子中形象化一个香蕉,记住圆括号在括号内。
示例
<app-sizer [(size)]="fontSizePx"></app-sizer>
<div [style.font-size.px]="fontSizePx">Resizable Text</div>
双向绑定语法实际上只是语法绑定和事件绑定的语法糖。
<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>
最新文章
- C# 版 flvmerge:快速合并多个flv文件
- MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)
- EF CodeFirst 创建数据库
- 访问图片可以使用闭包map
- j2ee项目后置类代码实现跳出iframe页面跳转
- 243. Shortest Word Distance
- MongoDB的安全性
- 【转】perl特殊符号及默认的内部变量
- apache开源项目--HttpComponents
- Android_AnimationDrawable介绍及使用
- Android TextView文字描边的实现!!
- 源码解析-knockout源码准备
- C语言 实现base64
- 如何优化Cocos2d-X游戏的内存
- 虚拟机工作站创建虚拟机并安装Linux教程
- 初识JDBC
- 源码分析之groupcache之consistenthash
- 数据量你造吗-JAVA分页
- Java数组逆序排列
- Python代码注释应该怎么写?
热门文章
- 命令行运行python模块时提示包找不到的问题
- Apache+tomcat的整合 分类: C_OHTERS 2014-05-07 15:08 293人阅读 评论(0) 收藏
- php求二叉树的深度(1、二叉树就可以递归,因为结构和子结构太相似)(2、谋而后动,算法想清楚,很好过的)
- USB 3.0规范中译本 第3章	USB 3.0体系结构概览
- 从 BM 到 RBM
- Net Core 实现谷歌翻译ApI 免费版
- JM-1 手机网站开发测试环境搭建
- 微服务学习笔记(1)——使用MagicOnion实现gRPC
- Expression Blend 的点滴(2)--利用可视化状态创建神奇翻转动画
- TextView中实现跑马灯的最简单方法