Meteor.setTimeOut()insire in eeor.loginwithpassword()中的内部

Question

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

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

当用户添加密码并被原发出时，系统将我们发送到下一个视图。这很好，但是...问题是：当用户放置无效的pasword 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放入流星中。有什么想法吗？

谢谢！

Answer 1

我看到您将回调包装在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);
    }
  ));
}