单击时更改按钮的背景颜色

Question

我有一个按钮，改变了它的文本enable和disable上点击。

我怎样才能改变按钮颜色，

例如更改为绿色亮起enable和红色亮起disable

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

成分

toggle = true;
status = 'Enable'; 

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

任何帮助表示赞赏。谢谢

Answer 1

为此，您可以使用两个不同的 css 类来使用 ngClass 指令，这些类将根据 toggle 的布尔值触发：

模板：

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

css

.green {
    background-color: green;
}

.red {
    background-color: red;
}

ts

toggle = true;
status = 'Enable'; 

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

演示

Answer 2

如果只想更改背景颜色，可以使用样式绑定：

<button [style.background-color]="toggle ? 'green' : 'red'" (click)="enableDisableRule()">
  {{status}}
</button>

请参阅此 stackblitz的演示。