Property Binding is bind property NOT attribute!

  1. import {Component, Input, Output, EventEmitter} from 'angular2/core';
  2.  
  3. @Component({
  4. selector: 'hero-item',
  5. styles: [
  6. '.active {color: red}'
  7. ],
  8. template: `
  9. <li [class.active]="isSelected"
  10. [attr.aria-label]="hero.name"
  11. (click)="selectHero(hero)">
  12. {{hero.name}}
  13. </li>
  14. `
  15. })
  16. // <li [ngClass]="{active: isSelected}"></li>
  17.  
  18. export class HeroItem{
  19. label="This is a super hero";
  20. isSelected = false;
  21. @Input() hero ;
  22. @Output() changed = new EventEmitter();
  23. constructor(){
  24.  
  25. }
  26.  
  27. selectHero(hero){
  28. this.changed.emit(hero);
  29. this.isSelected = true;
  30. }
  31. }

So 'class' is attribute on DOM, but 'class.active' is an property.

'aria-label' is attribute, so need to write like 'attr.aria-label'.

If you don't like use 'class.active', you can use 'ngClass' as shown in commnets

[Angular 2] Property Binding的更多相关文章

  1. Unity3D学习笔记——NGUI之Property Binding

    Property Binding:用于绑定两个组件,然后可以将一个组件的信息发送给另一个组件. 效果图如下: 一:使用步骤 1.建立一个Sprite 2.建立一个Label 3.为Sprite添加Pr ...

  2. 从 SimpleIntegerProperty 看 Java属性绑定(property binding) 与 观察者模式(Observable)

    //TODO:ExpressionHelper .bindBidirectional双向绑定.以及IntegerExpression的一系列算术方法和返回的IntegerBinding暂未详细解析(比 ...

  3. [AngularJS - thoughtram] Exploring Angular 1.3: Binding to Directive Controllers

    The post we have: http://www.cnblogs.com/Answer1215/p/4185504.html gives a breif introduce about bin ...

  4. [译]Exploring Angular 1.3: Binding to Directive Controllers

    原文: http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html Angul ...

  5. Event Binding in Angular

    https://www.pluralsight.com/guides/angular-event-binding Introduction In this guide, we will explore ...

  6. angular学习(二)—— Data Binding

    转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/51182106 Data Binding 在angular中.model和vie ...

  7. 【Angular 5】数据绑定、事件绑定和双向绑定

    本文为Angular5的学习笔记,IDE使用Visual Studio Code,内容是关于数据绑定,包括Property Binding.Class Binding.Style Binding. 在 ...

  8. angular学习3

    #创建了一个component 查看angular.json文件: "prefix":"app", 在所创建的component的selector上添加了app ...

  9. Angular 2 Architecture Overview

    Module 简单来说模块(module)就是完成共同目的的代码块,export一些内容例如一个类.函数.或值变量. component就是一个基本的Angular块,一个component类其实也是 ...

随机推荐

  1. Swift语言 代码添加文本输入框 和 占位文本

    //懒加载文本输入框 private lazy var textView: UITextView = { let textView = UITextView() textView.font = UIF ...

  2. iOS 改变UITextField中光标颜色

    第一种: [[UITextField appearance] setTintColor:[UIColor blackColor]]; 这个方法会影响整个app的所有UITextFiled... 第二种 ...

  3. 用CAGradientLayer实现渐变色动画

    效果图: github:https://github.com/RinpeChen/CAGradientLayerBasicDemo

  4. a标签增加onclick事件提示未定义function

    项目使用的是ext框架,版本是ext4.2 出现的问题代码如下: renderer : function(value){ var html = "<a href=\"java ...

  5. 动态脚本,在js里面又写js

    不知道怎么回事 代码测试不过 var a=document.createElement("script"); a.type="text/javascript"; ...

  6. 多线程12-CyclicBarrier、CountDownLatch、Exchanger

    1.CyclicBarrier 表示大家彼此等待,大家集合好后才开始出发,分散活动后又在指定地点集合碰面 package org.lkl.thead.foo; import java.util.con ...

  7. HTML5 canvas 中的线条样式

    线条样式属性 lineCap        设置或返回线条的结束端点样式 butt         默认.向线条的每个末端添加平直的边缘. round         向线条的每个末端添加圆形线帽. ...

  8. 在ubuntu14.14 安装php扩展扩展出现的问题

    我是在ubuntu14.14 安装的 lnmp. 部分扩展.均已安装好,但是我用apt-get 方式安装 redis和curl扩展时,我的配置都设置但是从phpinfo里面看没有响应的配置项. 于是我 ...

  9. WebSQL实例记录

    <table id="content"> </table> <br> <input type="button" id= ...

  10. js限制textarea文本框的文字个数

    现在发微博,那个文本框一般只能输入200字好像,再多就会自动删除,要么是提示字数受限,用Js就可实现本功能.今天带来的这个Js限制表单文本 框文字数量的例子,相信有此方面需要的是个不错的参考.为了便于 ...