应用默认样式和 onClick 更改按钮的样式-Angular 4

Question

我有一个按钮，我想应用按钮的默认样式，当用户单击按钮时，将按钮样式颜色更改为红色，背景颜色更改为白色。 Blow 是我的 .css 和组件。

 .btn-default {
  color: white;
  background-color: blue;

}

.btn-change {
  color: Red;
  background-color: white;
}

组件.ts

 import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  bntStyle: string;
  AppComponent() {

   this. bntStyle = 'btn-default';
  }
  submit() {
    this.bntStyle = 'btn-change';

  }

.html

 <div>
 <button name="Save" [ngClass]="['bntStyle']" (onClick)="submit()">Submit</button>
</div>

原文由 Shakeer Hussain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您正在绑定字符串“btnStyle”。相反，您应该绑定归档：

 <div>
    <button name="Save" [ngClass]="[bntStyle]" (click)="submit()">Submit</button>
</div>

原文由 Ayala 发布，翻译遵循 CC BY-SA 3.0 许可协议