API失败后Reactive Forms中valueChanges后续事件不执行问题求助

问题根源 #

当选择无对应省份的国家时，省份API请求失败，导致provinces$ Observable进入终止状态。Observable的核心特性是：一旦发生错误，整个流就会停止发射新值，因此后续选择有省份的国家时，valueChanges事件无法再触发新的API请求。

解决方案 #

使用RxJS的catchError操作符捕获请求错误，返回一个合法的Observable（比如空数组），让流保持活跃状态，确保后续的valueChanges事件依然能触发新请求。

方案1：在服务层统一处理错误 #

修改CountriesService中的getProvinces方法，添加错误捕获逻辑：

import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

export class CountriesService {

  private readonly countries$: Observable<Country[]>;

  constructor(private http: HttpClient) {
    this.countries$ = http.get<Country[]>('http://localhost:3000/countries');
  }

  getCountries = (): Observable<Country[]> => this.countries$;

  getProvinces(countryId: string): Observable<Province[]> {
    return this.http.get<Province[]>('http://localhost:3001/countriesProvinces/' + countryId)
      .pipe(
        map(result => result['provinces']),
        // 捕获错误，返回空数组保证流不中断
        catchError(() => of([]))
      );
  }
}

方案2：在组件层单独处理错误 #

如果不想修改服务逻辑，也可以在组件的provinces$管道中添加错误处理：

import { catchError, filter } from 'rxjs/operators';
import { of } from 'rxjs';

export class FormsComponent {
  countryDropDown: FormControl = new FormControl<Country['id']>(null);
  countries$: Observable<Country[]> = this.countriesService.getCountries();
  provinces$: Observable<Province[]>;

  constructor(private readonly countriesService: CountriesService) {
    this.provinces$ = this.countryDropDown.valueChanges.pipe(
      // 过滤初始null值，避免发起无效请求
      filter(countryId => !!countryId),
      switchMap(countryId => 
        this.countriesService.getProvinces(countryId).pipe(
          catchError(() => of([]))
        )
      )
    );
  }
}

模板优化（可选） #

原模板中<ng-container *ngIf="provinces$">属于冗余逻辑，可简化为：

<div *ngIf="provinces$ | async as provinces">
  <p *ngFor="let province of provinces">{{province | json}}</p>
</div>

内容的提问来源于stack exchange，提问作者wael jawadi