是否有可能更改按钮的颜色？

Question

我希望当用户将他的用户名和密码写入输入时按钮的颜色会发生变化，以便可以知道按钮的标志。 （所以灰色的变化 -> 绿色）

CSS

   .turn-green {
    background-color: green;
}

TS

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  userWroteName: false;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    function userTyped(value) { // fires on each keystroke
    const minLengthForName = 3; // you choose your min accepted length
    // some code you want here
    if (value.length >= minLengthForName) {
        this.userWroteName = true;
    } else { 
        this.userWroteName = false; 
    }
}


  }



  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }


}

Answer 1

在<button> 元素上的*.html 文件中，使用[ngClass]

<button [ngClass]="{'turn-green': userWroteName}">My Button</button>

在您的 *.css 文件中定义 turn-green 类

.turn-green {
    background-color: green;
}

在您的*.ts 文件中创建布尔变量userWroteName，然后根据用户是否在文本框中写入内容来触发一些函数。

userWroteName: false;

function userTyped(value) { // fires on each keystroke
    const minLengthForName = 3; // you choose your min accepted length
    // some code you want here
    if (value.length >= minLengthForName) {
        this.userWroteName = true;
    } else { 
        this.userWroteName = false; 
    }
}

此代码假定您正在监听每次击键，并在每次键入时调用 userTyped()。