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

Question

我有一个按钮，单击时将其文本更改为启用和禁用。

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

例如启用时更改为绿色，禁用时更改为红色

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

组件

toggle = true;
status = 'Enable'; 

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

感谢任何帮助。谢谢

Answer 1

您可以使用 ngClass 指令来实现此目的，使用两个不同的 css 类，这两个类将根据切换的 bool 值触发:

模板:

<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';
}

Demo