angular的属性绑定
1. 图片地址属性绑定
html文件
<img [src]="imgUrl">
ts文件
export class ProductComponent implements OnInit {
//声明图片的url地址
private imgUrl = 'http://placehold.it/260x150'; constructor() { } ngOnInit() {} }
2. 样式绑定
html文件
//如果star为true则添加glyphicon-star-empty这个类,如果为false则不会添加这个类
<span *ngFor="let star of stars" class="glyphicon glyphicon-star" [class.glyphicon-star-empty]="star"></span>
ts文件
export class StarsComponent implements OnInit { private stars:boolean[]; constructor() { } ngOnInit() {
this.stars=[false,false,false,true,true]
} }
3. 输入属性:父组件的属性传递给子组件
子组件html
<span *ngFor="let star of stars" class="glyphicon glyphicon-star" [class.glyphicon-star-empty]="star"></span>
<span>{{rating}}星</span>
子组件ts文件
import { Component, OnInit ,Input } from '@angular/core';
@Component({
selector: 'app-stars',
templateUrl: './stars.component.html',
styleUrls: ['./stars.component.scss']
})
export class StarsComponent implements OnInit {
//input装饰器,星级评价的组件的rating属性应该由他的父组件传递给它
@Input()
private rating:number = 0; private stars:boolean[]; constructor() { } ngOnInit() {
this.stars = [];
for(let i=1;i<=5;i++){
this.stars.push(i>this.rating)
}
}
}
父组件html
<div *ngFor="let product of products" class="col-md-4 col-sm-4 col-lg-4">
<div class="thumbnail">
<img [src]="imgUrl">
<div class="caption">
<h4 class="pull-right">{{product.price}}元</h4>
<h4><a>{{product.title}}</a></h4>
<p>{{product.desc}}</p>
</div>
<div>
//输入属性
<app-stars [rating]="product.star"></app-stars>
</div>
</div>
</div>
angular的属性绑定的更多相关文章
- angular 样式属性绑定
<button (click)="onClick($event)">点我</button> <input type="> <ta ...
- angular HTML属性绑定
- angular Dom属性绑定
- angular 组件学习-组件内属性绑定
#组件内的属性(元素的属性)绑定(property binding) 应用场景:通过改变DOM元素的属性,动态显示/隐藏一个元素 知识点:HTML 属性与DOM属性的区别 改变HTMl属性,浏览器需要 ...
- Angular数据双向绑定
Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...
- angular常用属性大全
Angular元素属性大全 addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元 ...
- angular 输入属性@Input , 输出属性@Output , 中间人模式
1 输入属性 通常用于父组件向子组件传递信息 举个栗子:我们在父组件向子组件传递股票代码,这里的子组件我们叫它app-order 首先在app.order.component.ts中声明需要由父组件传 ...
- 【WPF】如何把一个枚举属性绑定到多个RadioButton
一.说明 很多时候,我们要把一个枚举的属性的绑定到一组RadioButton上.大家都知道是使用IValueConverter来做,但到底怎么做才好? 而且多个RadioButton的Checked和 ...
- Knockoutjs实例 - 属性绑定(Bindings)之流程控制(Control flow)
一.foreach binding 使用此功能可以方便我们循环遍历输出某个数组.集合中的内容. (1).循环遍历输出数组 View Row Code 1 <script type="t ...
随机推荐
- docker 不同机器上容器互相通信
环境说明: 1.系统:centos7 2.docker:Docker version 1.3.2 3.docker启动参数:OPTIONS=--selinux-enabled=false -H fd: ...
- 再谈Nginx Rewrite, 中文URL和其它
上次谈到过Nginx和中文URL的问题,这几天又加深了认识. 多分享几个关于Nginx Rewrite的经验. Nginx匹配指定中文URL的方法:rewrite "(*UTF8)^x{66 ...
- Eclipse上Hadoop插件中Run On Hadoop原理[转]
通过Eclipse的hadoop插件中的"run on hadoop"命令的原理:它不是把jar包发送到hadoop集群上去运行,而只是使用了hadoop集群上的hdfs,从hdf ...
- 如何只利用NMAKE+CL+LINK写WIN32程序
关键是1.包含<Windows.h>及其他的相关头文件2.在LINK指令中最起码要加上KERNEL32.LIB USER32.LIB GDI32.LIB(不需要制定其路径,因为NMAKE, ...
- Python处理文件以及文件夹常用方法
1.创建文件并且写入 2.多行读取文件的方式 readlines() 3.一次读取全部内容 4.文件的删除 5.shutil 模块实现文件的复制 6.文件的重命名 7.获取文件的后缀名 8.pytho ...
- oracle中floor函数和to_number函数区别
oracle中floor函数没有值默认是0,number函数没有值默认是空
- R ggplot2 翻转坐标
p <- ggplot(mpg, aes(class, hwy)) p + geom_boxplot() p + geom_boxplot() + coord_flip()
- phan—php语法静态检查在windows下的配置
php7推出了语法树,于是静态语法分析更方便了.(可以直接下载我配置好的,传送门百度网盘) 1.先安装php7,到http://windows.php.net/下载php7带openssl的. 2.修 ...
- 搭建springmvc框架的另一种思路
在一个完整的项目里搭建springmvc框架的时候, 通常情况下,初学者在配置的时候,总是会把"中央控制器的名字"-servlet.xml文件放到/Webroot/WEB-INF下 ...
- Spider Studio 界面功能布局
SS是Spider Studio (采集工作站) 的简称, 这是由GDT团队开发的一款互联网数据采集开发工具. 它以浏览器为基础, 运用JQuery技术, 结合脚本化C#的强大功能, 能够轻松解决各类 ...