为什么我的声明式 RxJS 异步管道调用（成功/错误）同时显示在我的 HTML 中？

Question

我有两个声明性的 RxJS 调用（带有一个动作流），它们是分开的，并被传递到一个输出组件，以便在 HTML 中显示。因此，一旦我点击一个按钮，我们表单中的正文就会发送到我们的可观察操作，然后使用来自输入的请求正文触发我们的 POST 请求。

问题： 当我发送一个好的请求时，一切都很好 - 但是当我输入一个故意抛出错误的请求时，来自我们好的数据的异步仍然显示在浏览器中，但它也显示了错误的异步数据。同样，如果我故意提出一个错误的请求，它会在 html 中显示错误，但是当我提交一个好的请求时，好的数据和错误数据都会显示。我想要一个展示——显然不是两个。这发生在连续通话期间（无刷新）。

注意： 请忽略变量名称，例如我必须更改它们才能将其放在这里。

错误请求后的 HTML（良好）：

HTML 在一个错误的请求（GOOD）之后，然后提交一个好的请求：

我不得不改变一些数据的外观（在 HTML 中）所以忽略它的外观。但无论我连续拨打多少次电话，问题都会继续，他们都显示。

data.service.ts

 sendExampleRequest$ = this.exampleSubjectAction$.pipe(
    switchMap(exampleRequest => this.http.post<exampleResponse>(this.PCFUrl + '/getExample', exampleRequest)),
    tap(data => console.log(data)),
    catchError(this.handleError),
  );

sendExampleRequestEconomy$ = this.exampleSubjectActionEconomy$.pipe(
    switchMap(exampleRequest => this.http.post<exampleResponse>(this.PCFUrl + '/getExample', exampleRequest)),
    tap(data => console.log(data)),
    catchError(this.handleError),
  );

private handleError(err: HttpErrorResponse): Observable<never> {
    // in a real world app, we may send the server to some remote logging infrastructure
    //instead of just logging it to the console
    // let errorMessage: string;

    let errorMessage = new ErrorMessageModel();
    if (err.error instanceof ErrorEvent) {
      // A client-side or network error occured. Handle it accordingly
      errorMessage.errDescription = `An error occured: ${err.error.message}`;
      errorMessage.code = err.status;
    } else {
      // The backend returned an unsuccessful response code.
      // the response body may contain clues as to what went wrong,
      if (err.error.code === undefined || err.error.errDescription === undefined) {
        errorMessage.code = err.status;
        errorMessage.errDescription = err.statusText;
      } else {
        errorMessage.code = err.error.code;
        errorMessage.errDescription = err.error.errDescription;
      }
    }
    return throwError(errorMessage);
  }

home.page.ts

 private errorMessageSubjectEconomy = new Subject<ErrorMessageModel>();
  errorMessageEconomy$ = this.errorMessageSubjectEconomy.asObservable();

  private errorMessageSubjectPriority = new Subject<ErrorMessageModel>();
  errorMessagePriority$ = this.errorMessageSubjectPriority.asObservable();

exampleResponsePriority$ = this.dataService.sendExampleRequest$
    .pipe(
      tap(data => {
        this.showPageLoader = false;
        this.calculatorService.check(data);
      }),
      catchError((err: ErrorMessageModel, caught) => {
        err.type = 'Priority';
        this.errorMessageSubjectPriority.next(err);
        this.showPageLoader = false;
        return caught;
      }));

  // eslint-disable-next-line @typescript-eslint/member-ordering
  exampleResponseEconomy$ = this.dataService.sendExampleRequestEconomy$
    .pipe(
      tap(data => {
        this.showPageLoader = false;
      }),
      catchError((err: ErrorMessageModel, caught) => {
        err.type = 'Economy';
        this.errorMessageSubjectEconomy.next(err);
        this.showPageLoader = false;
        return caught;
      }));

数据流 -> 主页（获取用户输入）并将可观察到的数据传递给我们的输出组件 -> 输出组件（显示良好数据的输出。如果错误数据，则显示 ErrorComponent - 显示错误）

home.page.ts

<app-output [responsePriority]="economyResponsePriority$"
                    [responseEconomy]="economyResponseEconomy$"
                    [economyErrors]="errorMessageEconomy$"
                    [priorityErrors]="errorMessagePriority$"></app-output>

output.component.html

 <ng-container *ngIf="responsePriority | async as priorityResponse">
          <ion-text>We are still getting here even on errors</ion-text>
          <ion-text>Successfull Submission for 2nd rates</ion-text>

        </ng-container>
        <ng-container *ngIf="economyErrors | async as errorMessageEconomy">
          <app-error [economyError]="errorMessageEconomy"></app-error>
          <ion-text>This should be gone on valid submission</ion-text>
        </ng-container>

 <ng-container *ngIf="responseEconomy | async as economyResponse">
          <ion-text>We are still getting here even on errors</ion-text>
          <ion-text>Successful submission for 1st rates</ion-text>
        </ng-container>
        <ng-container *ngIf="priorityErrors | async as errorMessagePriority">
          <app-error [priorityError]="errorMessagePriority"></app-error>
          <ion-text>This should be gone on valid submission</ion-text>
        </ng-container>

我不完全确定问题是什么。就好像即使一个或另一个不存在，异步仍然表现得好像它存在一样？那是正常的吗？我的输出、主页和错误页面/组件也有 OnPush 的 changeDetection，但它们同时显示时仍然存在相同的问题。如果我遗漏了什么，请随时发布更正！