更改点击按钮的背景颜色 | 更改点击按钮的背景颜色

本文介绍了更改点击按钮的背景颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

我有一个按钮，单击后将其文本更改为enable和disable.

I have a button that changed its text to enable and disable on click.

我还如何更改按钮颜色

例如更改为enable上的绿色和disable

For e.g. change to Green on enable and Red on disable

<button (click)="enableDisableRule()">{{status}}</button>

组件

toggle = true;
status = 'Enable';

enableDisableRule(job) {
    this.toggle = !this.toggle;
    this.status = this.toggle ? 'Enable' : 'Disable';
}

感谢您的帮助.谢谢

为此，您可以使用ngClass指令，使用两个不同的CSS类，它们将基于toggle的布尔值触发:

You can use ngClass directive for that purpose using two different css classes that will be triggered based on the boolean value of toggle :

模板:

<button
    (click)="enableDisableRule()"
    [ngClass]="{'green' : toggle, 'red': !toggle}">
    {{status}}
</button>

css

.green {
    background-color: green;
}

.red {
    background-color: red;
}

toggle = true;
status = 'Enable';

enableDisableRule(job) {
    this.toggle = !this.toggle;
    this.status = this.toggle ? 'Enable' : 'Disable';
}

这篇关于更改点击按钮的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！