使用 httpclient 时查看变量未从错误处理程序代码更新

如何解决使用 httpclient 时查看变量未从错误处理程序代码更新

我有一个身份验证服务，我用它来登录我的应用程序。

这是在我的登录组件的 login() 函数中处理的：

  public login() {

    const val = this.form.value;

    if (!this.email.invalid && !this.password.invalid) {
      this.authService.login(val.email,val.password)
        .pipe(
          catchError(this.handleError)
        )
        .subscribe(
          data => {
            this.jwtToken = data;
          }
        );
    }
  }

如果发生某些错误（例如 401 未授权），则调用 handleError 函数，我会从该函数中获取更具体的信息：

private handleError(error: HttpErrorResponse) {
    if (error.status === 0) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:',error.error);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong.
      console.error(
        `Backend returned code ${error.status},` +
        `body was: ${error.error}`);
      this.loginStatus =
        `Backend returned code ${error.status},` +
        `body was: ${error.error}`
      console.log("Setting it: " + this.loginStatus)
    }
    // Return an observable with a user-facing error message.
    return throwError(
      'Something bad happened; please try again later.');
  }

在我的 .html 文件中，我将 {{loginStatus}} 用于输出在 handleError 函数中设置的文本。

我遇到的问题是 html 视图中的 loginStatus 显示永远不会更新。如果我在订阅部分为它分配一个值 - 它会被很好地更新，但是当我在 catchError 处理程序中分配它时它似乎没有更新。我可以在控制台中看到它在 handleError 函数中设置得很好，但视图永远不会更新。

如果我想在 handleError 函数运行后向用户显示一些更具体的信息，关于为什么以及可以做什么的任何想法？

解决方法

调用错误处理程序时，this 上下文正在丢失

尝试使用箭头函数调用错误处理程序：

catchError((err) => {
     return this.handleError(err)
})