Angular / RxJS - вложенная наблюдаемая - выражение рефакторинга

Question

Я пытаюсь загрузить отделы с сервера и заполнить раскрывающийся список.Если присутствует routeParam (dep), я бы хотел установить formControl (департамент) для целевого элемента.

Вложенные операторы pipe кажутся мне немного странными, но я все еще относительно новичок в RxJS.Есть ли лучший способ написать оператор присваивания для отдел $ ?

public form: FormGroup;
public departments$: Observable<Department[]>;

constructor(
  private route: ActivatedRoute,
  private departmentService: DepartmentService) {}

get department() {
   return this.form.get('department') as FormControl;
}

ngOnInit() {
    this.form = new FormGroup({
      department: new FormControl('', Validators.required)
    });

    this.departments$ = this.route.paramMap.pipe(
      switchMap(
        (params: ParamMap) => {
          return this.departmentService.getDepartments().pipe(
            tap(departments => {
              if (params.has('dep') && departments && departments.length) {
                this.department.setValue(departments.find(dep => dep.id === +params.get('dep')));
              }
            })
          );
        }
      )
    );
}

Answer 1

Что-то вроде этого должно сработать:

this.departments$ = this.route.paramMap.pipe(
  withLatestFrom(this.departmentService.getDepartments()),
  filter(([params, departments]) => {
    return params.has('dep') && departments.length
  }),
  tap(([params, departments]) => {
    this.department.setValue(
      departments.find(dep => dep.id === +params.get('dep'))
    );
  })
)

Можно попробовать combineLatest вместо withLatestFrom.

Answer 2

this.departments$ = this.route.paramMap.pipe(
  map(params => params.get('dep')),
  switchMap(dep => this.departmentService.getDepartment(dep))
  // The find department logic belongs in the service
);