动态改变背景色离子3

Question

你好，我想知道我可以改变背景颜色，用一个按钮，尝试这样做没有任何积极的结果：

什么，我试图做的是，用一个按钮，我改变我的背景的颜色，例如从白色到红色

我想这样，但它不工作

HTML：

<ion-header> 
    <ion-navbar> 
     <ion-title> 
      Ionic Blank 
     </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding [ngClass]="{ classname:false }"> 
    The world is your oyster. 
    <p> 
     If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide. 
    </p> 

    <ion-buttons (click)="color()"> 
     <button> 
     Hola 
     </button> 
    </ion-buttons> 
</ion-content> 

TS

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

} 

我的SCSS。

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

Answer 1

你可以做到这一点，如下图所示：

这里是工作stackblitz

.TS

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

color() { 
    this.isChanged = true; 
} 

.scss

.classname{ 
    background-color: red; 
} 

的.html

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