angular2 [style.color]无法正常工作

Question

我正在尝试在angular 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;