时间戳

首页 > 解决方案 > 函数返回后变量未定义，需要点击两次才能设置变量

angular - 函数返回后变量未定义，需要点击两次才能设置变量

问题描述

我有一个 HTML 文件：

一个用于密码重置...标准表单，如果函数返回错误，则输入电子邮件、提交和错误 div）：

<form #f="ngForm" (ngSubmit)="reset(f.value)">
     <div class="form-error">
         {{msg}}
     </div>
     <input matInput placeholder="Email" ngModel name="email" id="email" type="email" required>     
     <button mat-raised-button color="primary" [disabled]="!f.valid">Login</button>                 
</form>

我删除了一些内容以使其更具可读性，但它确实有效。这是我忘记的电子邮件 .ts 文件：

userService: UserService //Helper to forgot email function call
msg: string;             //If error messages occur, div will be populated

//Sends the email from the form to the UserService method
reset(email) {
    this.msg = this.userService.reset(email.email);
    console.log(this.msg);
}

这是我的用户服务功能：

reset(email):string {
    this.afAuth.auth.sendPasswordResetEmail(email)
    .catch(err => {
      this.errorMessage = err.message;
      return this.errorMessage;
    })
}

我的问题是，当我输入无效的电子邮件时，html 中的 DIV 会在两次单击后填充。第一次单击后，味精返回未定义，是什么让我的 div 在第一次单击时无法填充错误消息？

标签： angulartypescriptfirebasefirebase-authentication

解决方案

在这个块中：

reset(email):string {
    this.afAuth.auth.sendPasswordResetEmail(email)
    .catch(err => {
      this.errorMessage = err.message;
      return this.errorMessage;
    })
}

该return声明实际上无济于事。它没有脱离reset方法，基本上没有使用。

您可以将它从 中返回reset，但这将采用承诺的形式，这意味着您then在调用它时需要一个块：

this.userService.reset(email.email).then(err => {
  console.error(err);
});

我个人建议只是让拒绝冒出来reset，导致：

reset(email):string {
    return this.afAuth.auth.sendPasswordResetEmail(email)
}

接着

this.userService.reset(email.email)
    .catch(err => {
      this.errorMessage = err.message;
    })

推荐阅读