一、事件绑定

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

 

Angular 4 绑定的更多相关文章

  1. Vue && Angular 双向绑定检测不到对象属性的添加和删除

    由于ES5的限制 Vue  && Angular 双向绑定检测不到对象属性的添加和删除  还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...

  2. 关于angular双向绑定的一个问题,百度无果,还请帮忙解惑。

    用了一段时间anjular蛮好用的.其实用的功能不多.主要用于列表数据绑定以及一些简单效果的绑定,但是最近出现一个现象,百度无果,居然没有人遇到.现在描述一下,截图不方便,希望有人解惑. 列表ng-r ...

  3. angular入门--绑定字符串

    要使用angularjs,首先得下载并且在页面中调用它 先上源码 <html ng-app="app1"> <head> <meta name=&qu ...

  4. div实现自适应高度的textarea,实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  5. Angular select 绑定复杂类型 设置默认项

    <select ng-model="selectedTask" ng-options="s.name for s in TaskList">< ...

  6. angular 双向绑定

    <input type="text" [(ngModel)]="name"> {{name}} import { Component, OnInit ...

  7. angular 事件绑定

    <button (click)="onClick($event)">点我</button> import { Component, OnInit } fro ...

  8. Angular双向绑定简单理解

    在使用Antd的时候,一直很好奇里面的双向绑定的自定义组件是怎么做的. 因为之前一直用,没有去细看文档. 今天抽空来简单的撸一下. 在ng中,()是单向数据流,从视图目标到数据源,[()]这样就是双向 ...

  9. angular双向绑定与单向绑定的写法区别

    [ngModel]="manualCode" (ngModelChange)="manualCode=$event;" 等价于下面这样的写法: [(ngMode ...

随机推荐

  1. 原生JS和jQuery版实现文件上传功能

    <!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  2. postgresql数据库常用命令

    --获取数据库软件版本select version();--获取数据库启动时间select pg_postmaster_start_time();--获取配置文件最近load时间select pg_c ...

  3. 标签传播算法(Label Propagation)及Python实现

    众所周知,机器学习可以大体分为三大类:监督学习.非监督学习和半监督学习.监督学习可以认为是我们有非常多的labeled标注数据来train一个模型,期待这个模型能学习到数据的分布,以期对未来没有见到的 ...

  4. java之args[0]

    java程序有一个主方法main方法,是这样的public static void main(String [] args)args[0]就是用命令行javac编译后java运行java程序时,传入的 ...

  5. Kafka生产者APi

    kafka客户端发布record(消息)到kafka集群. 新的生产者是线程安全的,在线程之间共享单个生产者实例,通常单例比多个实例要快. 一个简单的例子,使用producer发送一个有序的key/v ...

  6. ansible with_subelements

    with_subelements 循环列表中的子元素 (意想不到的地方会用到) --- - hosts: web tasks: - authorized_key: "user={{ item ...

  7. 【DevExpress v17.2新功能预告】增强ASP.NET GridView的功能

    在下一个主要版本v17.2中,我们将为DevExpress ASP.NET GridView添加一些优秀的新功能.在本文中为大家介绍的所有功能都可用于 GridView的ASP.NET WebForm ...

  8. UINavigationController详细(转)

    UINavigationController使用详解 有一阵子没有写随笔,感觉有点儿手生.一个多月以后终于又一次坐下来静下心写随笔,记录自己的学习笔记,也希望能够帮到大家. 废话少说回到正题,UINa ...

  9. encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的区别

    一.这四个方法的用处 1.用来编码和解码URI的 统一资源标识符,或叫做 URI,是用来标识互联网上的资源(例如,网页或文件)和怎样访问这些资源的传输协议(例如,HTTP 或 FTP)的字符串.除了e ...

  10. ubuntu16 intellij idea install lombok plugin

    项目中用到lombok,idea会出现类似编译报错的红色,但并不影响运行.所以为了没有类似警告,就在idea上安装lombok插件.file-settings 安装完成之后,按照提示重启idea,问题 ...