Question

我有一个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);
}

这是我的UserService函数：

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

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

Answer 1

在此块中：

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

Answer 2

UserService 中的

重置方法应返回一个字符串，并且不返回任何内容。像这样实现。

// UserService

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


// Component
userService: UserService;
msg: string;
reset(email) {
   this.userService.reset(email.email).catch(err => this.msg = err.message);
}

函数返回后未定义变量，需要单击两次以设置变量

2 个答案: