Property Binding is bind property NOT attribute!

import {Component, Input, Output, EventEmitter} from 'angular2/core';

@Component({
selector: 'hero-item',
styles: [
'.active {color: red}'
],
template: `
<li [class.active]="isSelected"
[attr.aria-label]="hero.name"
(click)="selectHero(hero)">
{{hero.name}}
</li>
`
})
// <li [ngClass]="{active: isSelected}"></li> export class HeroItem{
label="This is a super hero";
isSelected = false;
@Input() hero ;
@Output() changed = new EventEmitter();
constructor(){ } selectHero(hero){
this.changed.emit(hero);
this.isSelected = true;
}
}

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. CSS3 之动画及兼容性调优

    由于CSS3动画对低版本的浏览器的支持效果并不是很好,特别是IE9及以下版本,更是无法支持. 所以有时候一些简单的动画效果,还只是用js代码来实现,但是效率偏低,而且效果有些偏生硬,不够顺滑. 毕竟用 ...

  2. C# ZXing.Net生成二维码、识别二维码、生成带Logo的二维码(二)

    1.使用ZXint.Net生成带logo的二维码 /// <summary> /// 生成带Logo的二维码 /// </summary> /// <param name ...

  3. 用CAGradientLayer实现渐变色动画

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

  4. MFC 堆栈溢出 test dword ptr [eax],eax ; probe page.

    今天调试程序的时候,发现一个奇怪的问题,之前调试都没问题的,今早加了一点东西,就出现错误,跳到调试位置,如下4行红色部分 ; Find next lower page and probe cs20: ...

  5. web项目环境搭建(1):建立一个maven项目

    一.maven简介以及常用概念 1.Maven是一个项目管理和整合的工具.Maven为开发者提供了一套完整的构建生命周期框架.开发团队基本不用花多少时间就能自动完成工程的基础构建配置,因为Maven使 ...

  6. SQL Server 中的SET XACT_ABORT各种用法及显示结果

      源地址:http://www.cnblogs.com/rob0121/articles/2320932.html 点击进入 默认行为:默认为SET XACT_ABORT OFF,没有事务行为. S ...

  7. ios nslog 打印字典为中文

    #import <Foundation/Foundation.h> @implementation NSDictionary (Log) - (NSString *)description ...

  8. office2003万能密钥

    保证有效 OFFICE 2003 :  GWH28-DGCMP-P6RC4-6J4MT-3HFDY

  9. 信息安全实验三:privilege-separation

    title: privilege-separation date: 2016-01-12 14:40:04 categories: tags: --- Exercise1 In order to ga ...

  10. 详解ios文件系统文件目录读写操作-备用

    iPhone文件读写系统操作教程是本文要介绍的内容,对于一个运行在iPhone得app,它只能访问自己根目录下得一些文件(所谓sandbox).一个app发布到iPhone上后,它得目录结构如下:  ...