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

我希望当用户将他的用户名和密码输入到输入中时，按钮的颜色会发生变化，因此可以按下按钮的标记。（灰色这样的变化 - >绿）是否有可能改变按钮的颜色？

CSS

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

@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'); 
    } 


}

来源

2017-10-08 Colin M.

请看看[我如何问一个好问题？]（https://stackoverflow.com/help/how-to-ask）。 _按钮？ - _which_按钮？将代码添加到您的问题。你试过什么了？是angularjs（v1）还是使用typescript和Angular2 +的ionic2，你的标签没有意义。 – David

这个问题很明显。他需要使用ngClass在某些条件下更改按钮的颜色。人们可以花几个小时寻找如何做这种简单的事情，并且像“你做得不够”这样的评论没有帮助。我们都去过那里。这不像他问如何初始化int或其他东西。 –

在你*.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()击键正在键入。

来源

2017-10-08 12:41:01

所以我写userWroteName：false;在导出类中，其余的在构造函数中？因为现在它什么也没有发生。如果我这样做。 –

它不会进入构造函数。它是* .ts文件中的一个独立函数。你的输入字段有听众吗？ –

不，我很抱歉，我不知道那是什么:(但我可以很快地谷歌它 –

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

回答

相关问题