Angular 11 switchmap not working after catch error

user_4717427 0
Viewed 262

I have two dropdowns in my angular app. Second one is populated based on first dropdown value. I am using switchmap. It works fine as long as there is no error. As soon there is no values to populate second dropdown and there is an error, subsequent call is not happening when i change values in first dropdown. Am i doing anything wrong here?

Here is my code:

private customListItems$ = this.auditFilterService.subjectType$     // this is first option value
  .pipe(
    takeUntil(this.destroy$),
    filter(x => x && x !== ''),
    switchMap((selectedSubjectType) => {
      const result = this.customListsService.getCustomListItemsByTypeName({
        typeName: selectedSubjectType,
        onlyActive: true
      } as CustomListItemsByLocationParams);
      return result;
    }),
    catchError(err => {
      console.log('error', err);
      return of(undefined);
    })
  );
angular11 rxjs
1 Answers

Following fix suggested in the comment by munleashed solves my issue:

  private customListItems$ = this.auditFilterService.subjectType$.pipe(
    takeUntil(this.destroy$),
    filter((x) => x && x !== ''),
    switchMap((selectedSubjectType) => {
      const result = this.customListsService
        .getCustomListItemsByTypeName({
          typeName: selectedSubjectType,
          onlyActive: true,
        } as CustomListItemsByLocationParams)
        .pipe(
          catchError((err) => {
            console.log('error', err);
            return of(null);
          })
        );
      return result;
    })
  );
user_47174270
Related