Question

当用户将用户名和pw写入输入时，我希望按钮的颜色发生变化，因此可以按下按钮的标志知道。（所以改变灰色 - ＆gt;绿色）

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

在*.html元素的<button>文件中使用[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()。

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

1 个答案: