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;

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

3 个答案: