Блог

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

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

 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') amp;amp; departments amp;amp; departments.length) {
                this.department.setValue(departments.find(dep => dep.id ===  params.get('dep')));
              }
            })
          );
        }
      )
    );
}
 

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

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

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

 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
);