Angular6 Promise 被解雇了两次

Question

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

我的 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 被解雇了两次

Angular6 Promise fired twice

angular-promise

angular