IoniC语言 使用双向绑定更改样式的问题.例如，我使用背景色

Question

我想我有一个非常基本的问题，但我不能解决它。所以我想做的是在Ionic中实现一个按钮，当按下时改变样式的样式。为了保持简单，现在我试着改变一个div的背景颜色。然而，它不工作，也没有给出一个错误。(我使用浏览器的控制台页面来查看更改，查找错误等)

card.page.html页面中的代码为

<ion-button
(click)="setStyle('red')"
[style.--background]="'pink'"
>
Some Button
</ion-button>

card.page.ts中的代码为

setStyle(value: string): void {
console.log('read More Works');
this.aColor = '#yellow';
console.log('read More still Works');
}

就是这样。点击"一些按钮"按钮不做任何事情，除了日志记录，但我很确定这不是双向绑定，这是问题，因为我只是尝试使用，例如，尝试只是一些文本作为"变量"，我想改变，这工作得很好。

我真的很感激你的帮助。由于

Answer 1

可以使用预定义的CSS样式。像这样:

card.page.scss

#somediv {
&.initial-style {
background: #000;
}
&.dinamic-style {
background: #fff;
}
}

card.page.html

<div id="somediv" [class]="apply_styles ? 'dinamic-style' : 'initial-style'">
styles applied: {{ apply_styles }}
</div>
<ion-button (click)="changeStyle()">Change Style</ion-button>

card.page.ts

apply_styles: boolean = false;
changeStyle() {
this.apply_styles = !this.apply_styles;
}

当然这很简单。但我希望它能给你指明正确的方向。