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;
        }
      );
}

是否存在一种优雅的方法来仅在http调用失败时显示html中的错误，而不显示每次成功结束时都没有更改error属性的每次操作？
在此示例中，它看起来“正常”，但有时我需要通过服务在两个组件之间共享错误，并且仅在服务组中调用setter来更改错误消息似乎并不可行。

谢谢

Answer 1

只有在http调用时，才有一种优雅的方法来在html中显示错误失败，并且不显示错误成功结束的时间，而不会更改错误每次都有属性？

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

但是您可以使用complete处理程序代替next处理程序来清除属性。有三种功能可以将数据发送给可观察者的订户：

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错误

1 个答案: