如何在 Angular 中在前端显示后端错误？

Question

我试图在 Angular material 开发的前端中显示后端生成的错误。我希望错误消息显示在警报 window 中。我的问题是错误消息仅显示在控制台中，而警报 window 中显示的消息是“未定义”。我该如何处理这个问题？

service.ts:

export class UserService {

  constructor(private http: HttpClient) { }

  public createUser(user: User): Observable<User> {
    return this.http.post<User>('http://localhost:8080/users/reg', user)
    .pipe(
      catchError(this.handleError)
    );;
  }
private handleError(error: HttpErrorResponse) {
    if (error.status === 0) {
      // A client-side or network error occurred.
      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);

    }
   
    return throwError(
      'Something bad happened; please try again later.');
  }


}

component.ts:

public createUser(message: string, action: string, createForm:NgForm ) {
    this.userService.createUser(createForm.value).subscribe(
      (response: User) => {
        this.user=response;
        console.log(response);
        console.log(createForm.value);
        this._snackBar.open(message, action);
        createForm.reset();
      },
      (error: HttpErrorResponse)=>{
        alert(error.message);
        createForm.reset();
      }
    )
  }

以下是控制台的屏幕截图，其中显示了我想在警报 window 中显示的消息错误：

当我将 alert(error.message) 更改为 console.error('foo', error); 时，控制台显示：

Answer 1

在方法“handleError”中，您正在return输入一个字符串：

return throwError(
      'Something bad happened; please try again later.');

因此，当您订阅时，您将收到字符串 'Something bad happened; please try again later.'

如果你想让订阅者收到消息，改变你的handleMessagereturn值：

return throwError(error);

如何在 Angular 中在前端显示后端错误？

How do I display a back-end error in the front-end in Angular?

error-handling

frontend

angular-material

angular

angular-errorhandler