当API失败时，“valueChanges”将不会在下一个事件中执行[反应式表单+ rxjs switchmap]

Question

我有一个下拉菜单，其中包含国家/地区列表， 当我从下拉列表中选择这些国家之一时，应显示与该国家/地区相关的所有省份，

----> 有两个API，第一个是返回国家列表，第二个是在从下拉列表中选择一个国家时执行，它将把国家ID作为参数，并根据它返回省份到这个ID 一切看起来都不错，直到我从下拉列表中选择一个在第二个 API 中没有任何省份的国家/地区。

---> 在这种情况下，API（根据国家/地区 ID 返回省份）将失败，下次当我从下拉列表中选择一个新国家/地区（即使它包含省份）时，它将无法工作（我不这样做）没有看到任何对 API 省的调用。

知道如何解决这个问题吗？

这就是服务：

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

}

这是模板：

<ng-container *ngIf="countries$ | async as countries">
  <select [formControl]="countryDropDown">
    <option *ngFor="let country of countries" [value]="country.id">{{country.name}}</option>
  </select>
</ng-container>

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

这是控制器

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(
      switchMap(countryId => this.countriesService.getProvinces(countryId))
    );
  }
}

这是国家3和国家4没有任何省份时的情况

这是国家 API：

{
  "countries": [
    {
      "id": "1",
      "name": "Country_1"
    },
    {
      "id": "2",
      "name": "Country_2"
    },
    {
      "id": "3",
      "name": "Country_3"
    },
    {
      "id": "4",
      "name": "Country_4"
    }
  ]
}

这是各省的API：

---> 当使用国家 ID 调用时，它只会返回该 ID 的省份，否则会失败

{
  "countriesProvinces": [
    {
      "id": "1",
      "provinces": [
        {
          "id": "1",
          "name": "provinces_11"
        },
        {
          "id": "2",
          "name": "provinces_12"
        },
        {
          "id": "3",
          "name": "provinces_13"
        }
      ]
    },
    {
      "id": "2",
      "provinces": [
        {
          "id": "1",
          "name": "provinces_21"
        },
        {
          "id": "2",
          "name": "provinces_22"
        },
        {
          "id": "3",
          "name": "provinces_33"
        }
      ]
    }
  ]
}

Answer 1

尝试从 api 捕获错误，这应该可以让您的流保持活动状态。

this.provinces$ = this.countryDropDown.valueChanges.pipe(
    switchMap(countryId => this.countriesService.getProvinces(countryId).pipe(
        catchError(err => of([]))
    )
);

不确定以下是否有效，但你也可以尝试

this.provinces$ = this.countryDropDown.valueChanges.pipe(
    switchMap(countryId => this.countriesService.getProvinces(countryId)),
    catchError((err) => of([]))
);