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

【问题标题】：angular2 [style.color] not working properlyangular2 [style.color] 无法正常工作
【发布时间】：2023-03-12 02:59:01
【问题描述】：

我正在尝试在 Angular 2 中使用样式绑定，但不知何故我错过了导致它无法工作的部分。目的是让默认文本变为灰色，当用户点击它（代码尚未制作）时，它会变为 deeppink。但是在测试 style 属性时，它似乎不起作用。

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;

}

【问题讨论】：

标签： angular binding

【解决方案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;

【讨论】：

【解决方案2】：

改变

color: true;

到

color = true;

或

color: boolean = true;

【讨论】：

【解决方案3】：

在您声明和设置颜色的组件中存在错误。如果您将其更改为以下内容，它应该可以工作：

color:boolean = true;

【讨论】：