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的属性绑定的更多相关文章

  1. angular 样式属性绑定

    <button (click)="onClick($event)">点我</button> <input type="> <ta ...

  2. angular HTML属性绑定

  3. angular Dom属性绑定

  4. angular 组件学习-组件内属性绑定

    #组件内的属性(元素的属性)绑定(property binding) 应用场景:通过改变DOM元素的属性,动态显示/隐藏一个元素 知识点:HTML 属性与DOM属性的区别 改变HTMl属性,浏览器需要 ...

  5. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

  6. angular常用属性大全

    Angular元素属性大全 addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元 ...

  7. angular 输入属性@Input , 输出属性@Output , 中间人模式

    1 输入属性 通常用于父组件向子组件传递信息 举个栗子:我们在父组件向子组件传递股票代码,这里的子组件我们叫它app-order 首先在app.order.component.ts中声明需要由父组件传 ...

  8. 【WPF】如何把一个枚举属性绑定到多个RadioButton

    一.说明 很多时候,我们要把一个枚举的属性的绑定到一组RadioButton上.大家都知道是使用IValueConverter来做,但到底怎么做才好? 而且多个RadioButton的Checked和 ...

  9. Knockoutjs实例 - 属性绑定(Bindings)之流程控制(Control flow)

    一.foreach binding 使用此功能可以方便我们循环遍历输出某个数组.集合中的内容. (1).循环遍历输出数组 View Row Code 1 <script type="t ...

随机推荐

  1. python 操作redis之——有序集合(sorted set) (七)

    #coding:utf8 import redis r =redis.Redis(host=") 1.Zadd 命令用于将一个或多个成员元素及其分数值加入到有序集当中.如果某个成员已经是有序 ...

  2. mysql误删root用户或者忘记root密码解决方法

    解决方法一: 到其他安装了Mysql的服务器(前提是要知道该服务器上Mysql的root用户密 码),打开[Mysql的安装目录/var/mysql],将其中的user.frm.user.MYD.us ...

  3. Redis(七):Jedis简介和集群

    Jedis简介 1.Jedis 是Redis 客户端工具jar2.使用非集群版示例代码 Jedis jedis = new Jedis("192.168.139.132", 637 ...

  4. atitit.为什么笔记本跟个手机不能组装而pc可以

    atitit.为什么笔记本跟个手机不能组装而pc可以 1. 标准程度差 1 2. 为什么标准程度差 1 3. 第一个答案是「能」.第二个答案是「麻烦」. 2 4. 为什么手机不能自定义组装 3 1.  ...

  5. CentOS7 安装 mplayer

    我google找到这个方法可以简单快速安装 mplayer 和 vlc,centos 7 only. Please google the latest release for the followin ...

  6. jquery $.each 和for 怎么跳出循环(终止本次循环)

    1.for循环中我们使用continue:终止本次循环计入下一个循环,使用break终止整个循环. 2.而在jquery中 $.each则对应的使用return true  和return false ...

  7. 16位结构的CPU,8086给出物理地址的方法

    .16位结构的CPU 概括地讲,16位结构(16位机,字长为16位等常见说法,与16位结构的含义相同)描述了一个CPU具有下面几方面结构特性: 1.运算器一次最多可以处理16位的数据结构 2.寄存器的 ...

  8. WPF集合

    Dependency Property 依赖属性 http://www.cnblogs.com/HelloMyWorld/archive/2013/02/21/2920149.html Attache ...

  9. 一款基于jQuery的带Tooltip表单验证的注册表单

    今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQ ...

  10. js去掉双引号

    替换: d = d.replace("\"","").replace("\"",""); 全部替换: ...