如何在 Angular 中向用户显示 httpClient 错误

Question

我的服务看起来像这样：

sortTraceGroups(): Observable<TraceGroup[]> {
    const url = environment.servicesBaseUrl + 'api/trace/sort?sort=' + this.sortChosen;
    return this.httpClient.post<TraceGroup[]>(url, this.traceGroups)
                          .pipe(catchError(this.handleError));
}

private handleError(error: HttpErrorResponse): Observable<never> {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(`Backend returned code ${error.status}, ` + `couldn't get response from server. ElasticSearch is probably down.`);
    }
    return throwError(`Error: couldn't get response from server.`);
  }
}

这是一个订阅 http 调用的组件

onSortChoose(sortChosen: SortChosen): void {
    this.traceService.setSortChosen(sortChosen);
    this.traceService.sortTraceGroups()
      .subscribe(
        traceGroupsSorted => {
          this.traceGroups = traceGroupsSorted;
        },
        (error) => {
          this.error = error;
        }
      );
}

现在我试图在我的 html 中显示错误消息，就像这样

<div *ngIf="error" class="offset-md-3 col-md-6 alert alert-danger row justify-content-center" role="alert">
  {{ error }}
</div>

第一次出错时正常。
但是，当我再打一次电话并成功完成时，我不想再显示错误消息了。我想出的唯一解决方案是每次我进行 http 调用时更新错误消息，这在我看来是不正确的。

onSortChoose(sortChosen: SortChosen): void {
    this.traceService.setSortChosen(sortChosen);
    this.traceService.sortTraceGroups()
      .subscribe(
        traceGroupsSorted => {
          this.traceGroups = traceGroupsSorted;
          this.error = ''; // do I need this line in every http call just to reset error message ?
        },
        (error) => {
          this.error = error;
        }
      );
}

有没有一种优雅的方法可以在 html 中仅在 http 调用失败时显示错误并且在每次成功结束时不显示而无需每次都更改错误属性？
在此示例中，它看起来 'okayish' 但有时我需要通过服务在两个组件之间共享错误，而调用服务上的 setter 似乎并不能改变错误消息

谢谢

Answer 1

Is there an elegant way to display error in html only when http call fails and don't show when it ends successfully without changing the error attribute every time?

不，您必须取消设置属性。

但是您可以使用 complete 处理程序来清除属性而不是 next 处理程序。可以使用三个函数将数据发送到 observable 的订阅者：

next：发送任何值，如数字、数组或对象到其订户。
error: 发送一个Javascript错误或异常
complete: 不发送任何值

onSortChoose(sortChosen: SortChosen): void {
  this.traceService.setSortChosen(sortChosen);
  this.traceService.sortTraceGroups()
    .subscribe(
      traceGroupsSorted => {
        this.traceGroups = traceGroupsSorted;
      },
      (error) => {
        this.error = error;
      },
      () => this.error = ''; // do I need this line in every http call just to reset error message ?
    );
}

Defining observers

如何在 Angular 中向用户显示 httpClient 错误

How to display httpClient error to user in Angular

angular

angular-httpclient