0

我需要帮助。我的代码在登录中。当用户点击时login：我设置了一个按钮禁用，以避免用户在系统工作时多次点击，等待答案

我的代码工作正常，但是当用户单击按钮登录时，我放置了一个加载器类。

当用户输入密码并被接受时，系统将我们发送到下一个视图。这很好用，但是...问题是：当用户输入无效密码时，this.loadingActive = true;不要更改..该按钮将永远保持旋转激活状态。我的意思是发生了一些事情，变量loadingActive 没有改变true

我的 html

<button class="btn btn-default btn-lg btn-block"
        ng-class="{'disabled': login.loadingActive === false}"
        ng-disabled="loginForm.$invalid || login.loadingActive === false"
        ng-click="login.login()">
    <span ng-hide="login.loadingActive" class="fa fa-refresh animacion-cargando"></span>
    <span ng-hide="login.loadingActive">loading...</span>
    <span ng-show="login.loadingActive">Login</span>
</button>

这是我的 js 文件

login() {
    this.loadingActive = false;
    this.error = '';
    Meteor.loginWithPassword(this.credentials.email.toLowerCase(), this.credentials.password,
        this.$bindToContext((err) => {
            Meteor.setTimeout(() => {
                if (err) {
                    this.loadingActive = true;
                    this.error = err;
                } else {
                    this.loadingActive = true;
                    this.$state.go('app.pageOne');
                }
            }, 1000);
        })
    );
}

为什么当我将 Meteor.setTimeout 放入 Meteor.loginWithPassword 时会发生这种情况？有任何想法吗？

谢谢！

4

1 回答 1

0

我看到您将回调包装在this.$bindToContext. 不知道它做了什么，但我的猜测是它改变了上下文（this）回调函数，所以this.loadingActive = true没有效果。

要解决此问题，您可以使用参考变量：

login() {
  const self = this;
  // ...
  Meteor.loginWithPassword(
    self.credentials.email.toLowerCase(),
    self.credentials.password,
    self.$bindToContext((err) => {
      Meteor.setTimeout(() => {
        // ...
        self.loadingActive = true;
      }, 1000);
    }
  ));
}
于 2016-12-08T01:29:58.833 回答