Angular 可观察到的错误不会使用 ChangeDetectionStrategy.OnPush 刷新界面

Question

我有一个使用服务提交一些数据的组件。

该组件使用 ChangeDetectionStrategy.OnPush ，但发生了一些奇怪的事情:

当请求 成功 : next回调被调用，formStatus更改为“成功”和 界面刷新有了这个变化。

当请求 失败 , error回调被调用，formStatus更改为“错误”但界面 不刷新有了这个变化。

据我了解，界面不应该刷新，因为我使用 ChangeDetectionStrategy.OnPush我正在更改一个基本类型的字符串变量。

那么，¿为什么会在 next 中触发变更检测？ ?

零件

当服务中发生一些错误时，我想在错误回调中接收它。

submit() {
    this.formStatus = 'sending';
    this._service.create(data).subscribe({
      next: () => {
        this.formStatus = 'success';
        // interface refreshes
      },
      error: () => {
        this.formStatus = 'error';
        // interface does not refresh
        console.log(this.formStatus); // prints 'error'
      },
    });
  }

<div *ngIf="formStatus === 'success'">
  ...
</div>

服务

调用 API 并使用 errorUtil.handle 捕获错误，这会引发 rxjs 错误(因为我想返回 Observable.error)。

  create(requestData: Data): Observable<Data> {
    return this._http
      .post<HttpResponse<CreateResponse>>(
        MY_API.createUrl,
        JSON.stringify(requestData)
      )
      .pipe(
        catchError(this._errorUtil.handle()),
        map(data => this.onSuccessCreate(requestData, data))
      );
  }

错误处理程序

handle<T>(): (error: HttpErrorResponse, caught?: Observable<T>) => Observable<T> {
    return (error: HttpErrorResponse, caught?: Observable<T>) => {
      return throwError();
    };
  }

我已尝试更改 return throwError();至 throw throwError();但行为是一样的。

Answer 1

这是一种奇怪的行为，我仍然不明白为什么在调用 next 时会更新接口(interface)。它也不应该被更新。
正确的方法是使用 流收听表单状态的变化。
零件

type FormStatus = 'clean' | 'sending' | 'success' | 'error';
// ...
private _formStatus$: BehaviorSubject<FormStatus> = new BehaviorSubject<FormStatus>('clean');


set formStatus(status: FormStatus) {
    this._formStatus$.next(status);
}

get formStatus$(): Observable<FormStatus> {
    return this._formStatus$.pipe(
        shareReplay({ refCount: true, bufferSize: 1 })
    );
}

<div *ngIf="(formStatus$ | async) !== 'error'">
  ...
</div>