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;