angular2 [style.color]不能正常工作

Question

我想在角度2中使用样式绑定，但不知何故我错过了导致它不工作的部分。目的是让默认文本变灰，当用户点击它（代码还没有制作）时，它会变为deeppink。但是，在测试样式属性时，它似乎不起作用。

import { Component } from "@angular/core" 

@Component({ 
    selector: "like", 
    template: ` 
     <i class="glyphicon glyphicon-heart" [style.color]="color ? 'grey' : 'deeppink'" style="font-size: 100px;"></i> 
    ` 
}) 

export class LikeComponent { 
    count: number = 10; 
    color: true; 

} 

Answer 1

刚刚测试过这一点，并能正常工作：

import { Component } from "@angular/core" 

@Component({ 
    selector: 'like', 
    template: ` 
     <i class="glyphicon glyphicon-heart" [style.color]="color ? 'grey' : 'deeppink'" style="font-size: 100px;"></i> 
     <button (click)="toggle()">Toggle</button> 
    ` 
}) 

export class LikeComponent { 
    count: number = 10; 
    color: boolean = true; 
    toggle() { 
     this.color = !this.color; 
    } 
} 

讲究

color: boolean = true; 

，而不是

color: true; 

Answer 2

变化

color: true; 

到

color = true; 

或

color: boolean = true; 

Answer 3

有在你声明组件，并设置颜色错误。如果你改变它到下面它应该工作：

color:boolean = true;