开发者社区> zting科技> 正文

Angular 4 绑定

2017-12-15 1469

简介：

+关注继续查看

一、事件绑定

1. 创建doOnClick函数

2. 网页中绑定doOnClick方法

3. 效果图

二、属性绑定

1. 定义imgUrl的网址

2. 定义img src属性

另外一种写法

3. html 属性绑定

在网页中绑定size

4. css html 属性绑定

html绑定

5. css增加属性

原先已经有a 和b属性，

之后增加c属性

6. ngClass管理多个css

html code

<div [ngClass]="divClass">HI</div>

　

7. 样式属性

带有单位（px）的样式

<div [style.font-size.px]="isDev?'100':'50'">是否是开发环境</div>

　　

　

8.ngStyle使用

<div [ngStyle]="divStyle">haha</div>

　divStle定义

divStyle: any = {

  color: 'red',

  background: 'yellow',
};
 
constructor() {

  setTimeout(() => {

    this.divStyle = {

      color: 'yellow',

      background: 'red',

    };
 
  }, 3000);
}

另一种情况的使用

其中recListWidth是自定义的变量

三、双向绑定

html代码

app.module.ts 加入FormsModule

本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/p/7250101.html，如需转载请自行联系原作者

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

前端开发

Angular绑定

开发者社区 > 开发与运维 > 文章

云迁移中心

作者高分内容

更多

如何写好解决方案 5653 Phonegap 通信原理 1905 Phonegap 原生控件(Android)与html混合 1992 Angular 4 绑定 1469 Angular 4 组件间的通信 1823

相关文章

技术君

Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的

Angular Ngrx Store 里 State 和 Reducer 的绑定关系是如何实现的

43 0

技术君

Angular元素属性绑定的一个例子

Angular元素属性绑定的一个例子

50 0

开发工程师

Angular list列表绑定的一个例子

Angular list列表绑定的一个例子

67 0

建站达人

Angular 怎样绑定 Html

转载自 http://www.ngui.cc/index.html 我正在编写一个Angular应用程序，并且我想要显示一个HTML响应。

818 0

码农小达人

Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程

Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程

6 0

码农小达人

什么是 Angular 应用的 browser Application bundles 和 server Application bundle

什么是 Angular 应用的 browser Application bundles 和 server Application bundle

8 0

开发工程师

Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法？

Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法？

18 0

开发工程师

关于 Angular 应用的入口

关于 Angular 应用的入口

12 0

开发工程师

Angular 应用里 index.html 的作用

Angular 应用里 index.html 的作用

20 0

开发工程师

一款开源的 Angular Storefront 应用介绍，代号 Spartacus 诞生的历史背景

一款开源的 Angular Storefront 应用介绍，代号 Spartacus 诞生的历史背景

16 0

+关注

zting科技

文章

问答

视频

作者高分内容

更多

如何写好解决方案 5653 Phonegap 通信原理 1905 Phonegap 原生控件(Android)与html混合 1992 Angular 4 绑定 1469 Angular 4 组件间的通信 1823

文章排行榜

最热

最新

1 MIPS架构深入理解9-向MIPS移植软件之Cache管理 40662

2 C++ STL容器和算法：详解和实例演示 39521

3 Go 方法接收器：选择值接收器还是指针接收器？ 38132

4 代码的简单设计五原则 31119

5 使用篇丨链路追踪（Tracing）很简单：链路拓扑 30606

6 如何提高光伏发电效能异常检出效率的实践案例 28284

7 java 泛型万字详解（通俗易懂) 28144

8 日志服务 SLS 和开源 ELK 全面对比 28059

9 数据一致性比对（番外） 27414

10 阿里云检索分析服务Elasticsearch版内核持续优化 25293

11 【分布式技术专题】「分布式技术架构」手把手教你如何开发一个属于自己的限流器RateLimiter功能服务 21707

12 高性能的本地缓存方案选型，看这篇就够了！ 21548

13 PolarDB-X 致数据库行内人 (一) ~ 如何有效评测国产数据库的分布式事务 15317

14 实践教程之体验PolarDB-X分布式事务和数据分区 10367

15 Python3，自从掌握了这个方法，再也不用print进行调试了。 14618

16 现场直击：2023阿里云峰会精彩发布抢先看（内含福利） 335140

17 如何解决IoT数据入仓的客户实践 8636

18 大数据&AI产品月刊【2023年4月】 5418

19 ClickHouse创始人：融合数据库该“卷”的还是性能和速度 55367

20 阿里云联合埃森哲正式发布《跨国企业上云登陆区（Landing Zone）白皮书》 50777

1 AIGC创作家 152

2 当MySQL想恋爱，java和navicate抢着做媒婆 ------ java连接MySQL数据库 & navicat for MySQL 连接 90

3 亿视电子基于PolarDB-X打造能源数字基座实践 67

4 全面升级，重磅上线！容器服务ASK评测携大奖前来！ 60

5 阿里云丁宇：云上开发成为主流，Serverless 定义新范式 67

6 阿里云AI新品“通义听悟”，开放公测！ 1569

7 LeetCode算法小抄--二叉搜索树 125

8 小米基于 Flink 的实时数仓建设实践 146

9 阿里云OpenSearch重磅推出LLM问答式搜索产品，助力企业高效构建对话式搜索服务 715

10 阿里云“通义听悟”正式公测：用户可免费领100小时转写服务 7346

11 Bean异步初始化，让你的应用启动飞起来 5968

12 图解LeetCode——98. 验证二叉搜索树 11032

13 图解LeetCode——108. 将有序数组转换为二叉搜索树 100

14 Windows上的实用CMD命令 10890

15 关于编辑Windows的右键【新建】删除和添加 11171

16 SpringMVC总结_从RESTful到拦截器 10894

17 进阶篇丨链路追踪（Tracing）很简单：链路成本指南 6105

18 一口气整理三种不同运营商要素验证API的Java 接入代码 81

19 python异常处理 10701

20 Git分支教程：详解分支创建、合并、删除等操作 10942

相关课程

更多

AngularJS 快速入门

10694

25

去学习

相关电子书

更多

Angular从零到一

立即下载

低代码开发师（初级）实战教程

立即下载

阿里巴巴DevOps 最佳实践手册

立即下载