angular2 [style.color] funktioniert nicht richtig

Question

Ich versuche eine Stilbindung in angular 2 zu verwenden, aber irgendwie habe ich einen Teil vermisst, der es nicht funktioniert. Die Absicht ist, den Standardtext grau zu halten und wenn der Benutzer darauf klickt (Code wurde noch nicht erstellt), wechselt er zu Deeppink. Aber beim Testen der Style-Eigenschaft scheint es nicht zu funktionieren.

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

Nur soviel getestet und das funktioniert gut:

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; 
    } 
} 

achten Sie auf die

color: boolean = true; 

statt

color: true; 

Answer 2

ändern

color: true; 

zu

color = true; 

oder

color: boolean = true; 

Answer 3

Es ist ein Fehler in der Komponente, wo Sie und stellen Sie Farbe erklären. Wenn Sie es zu den folgenden ändern, sollte es funktionieren:

color:boolean = true;