Question

我正在构建一个有角度的应用程序，登录时遇到问题。我的登录功能被触发了两次，我也不知道为什么。

我的AuthenticationService方法是：

public login(body: any): PromiseLike<any> {
return this.http
  .post(`${environment.baseApi}/login`, body)
  .pipe(
    catchError((e) => this.handleErrorLog(e, true))
  )
  .toPromise();
}

我的LoginComponent就像：

public login() {
this.loginUser.username = this.username;
this.loginUser.password = this.password;

this.authService.login(this.loginUser).then((data) => {
  console.log("login...");
  this.loginSuccessful(data);
});

}

我的html按钮如下：

<button class="btn btn-lg btn-primary btn-block login-btn" type="submit" [disabled]="loginForm.invalid" (click)="login()">Login</button>

登录正常，但是当我单击按钮登录时，请求被触发两次。有人知道为什么吗？

Answer 1

如果 form 标签中有(ngSubmit)="login()"，而 button 标签中有(click)="login()"，那么您的 login（）将触发两次

因此，请在您的 .component.html 文件中进行以下更改

<form (ngSubmit)="login()">
    // Rest of form
  <button type="submit" >Login</button> // --> remove (click)="login()"
</form>

Angular6 Promise被解雇了两次

1 个答案: