Angular 在离子3中动态更改背景色

您好，我想知道如何使用按钮更改背景颜色，并尝试了此操作，但没有任何积极的结果：

我试着用一个按钮来改变我背景的颜色，例如从白色变为红色

我试着用这种方法，但不起作用

HTML:

我的SCSS

page-home {
    .classname {
        Background: red;
    }
}

---

您可以按如下所示进行操作：

这是工作票

.ts

.scss

.html

欢迎来到爱奥尼亚！
动态色彩

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  classname = false;
  constructor(public navCtrl: NavController) {

  }

  color() {
    console.log('Hola');
    this.classname = true;
  }

}

page-home {
    .classname {
        Background: red;
    }
}

  isChanged: boolean = false;
  constructor(public navCtrl: NavController) {
  }

 color() {
   this.isChanged = true;
 }

.classname{
  background-color: red;
}

<ion-content padding [ngClass]="{'classname': isChanged }">
    <h2>Welcome to Ionic!</h2>
    <button ion-button color="secondary" (click)="color()">Dynamic Color</button>
</ion-content>