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

Question

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

服务.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.');
  }


}

Answer 1

在方法“handleError”中，您将返回一个字符串：

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