在另一组可观察到完成后，可观察到可观察

Question

所以，我是RXJ的新手，并且正在与Angular 5一起玩，想知道如何完成以下操作：

让我们有一个表格。当页面加载时，我们需要3个选择以从服务器中填充数据，因此我们有3个可观察到的方法来完成此操作。

现在，我们还可以观察到何时更改路由参数（在这种情况下，我们必须获取请求的记录并填充表单）：

// These 3 guys will get the required data for each select
this.countryService.getAll().subscribe(countries => {
  this.countries = countries;
});
this.categoryService.getAll().subscribe(categories => {
  this.categories = categories;
});
this.sectorService.getAll().subscribe(sectors => {
  this.sectors = sectors;
});

// And this is for the change in url
this.route.paramMap.subscribe(params => {
  this.formDisabled = true;
  const id = params.get('id');
  // We get the resource based on the id param
  this.service.get(id).subscribe(contact => {
    this.contact = contact;
    this.form.reset(this.contact);
    this.formDisabled = false;
  }
});

现在，我需要this.service.get(id).subscribe()的回调仅在填充了3个选择后，即当它们各自的回调完成后，否则我们可能最终可能会在未完全构建时尝试使用表单进行操作。我希望它保持与其他3个请求并行请求资源，但是只有在完全完成其他3个完成后才执行回调（与其重置表单）。

Answer 1

，如果您尝试在上布局上的步骤，而不是如何实现，通常会有所帮助。这会训练您以更"反应"的方式思考。

1. 获取3个下拉列表。这可以在并行

   中完成
   • 分配下拉值

2. 检索路线参数

   • 禁用表格
3. 呼叫服务以从步骤2
中检索ID检索

4. 做其余的：

   • 分配联系人的值。

   • 重置表格

   • 可重新固定表格

布局一旦步骤，将它们编码为可观察到的步骤将非常琐碎：

//Step 1: Call the dropdownsService in parallel
Observable.forkJoin([
    this.countryService.getAll(),
    this.categoryService.getAll(),
    this.sectorService.getAll()
])
    .switchMap(([countries, categories, sectors]) => {
        //Assign the dropdown values
        this.countries = countries;
        this.categories = categories;
        this.sectors = sectors;
        //Step 2: Retrieve the route params
        return this.route.paramMap;
    })
    .switchMap(({id}) => {
        //disable the form
        this.formDisabled = true;
        //step 3: Call the service to get contact info
        return this.service.get(id)
    })
    .subscribe(contact => {
        //Do the rest
        this.contact = contact;
        this.form.reset(this.contact);
        this.formDisabled = false;
    });

ps ：我使用对象和数组破坏了更简洁和可读的代码。

编辑：

如果要调用与dropdown服务平行的this.service.get，请将它们放入相同的Observable.forkJoin：

Observable.forkJoin([
    this.countryService.getAll(),
    this.categoryService.getAll(),
    this.sectorService.getAll(),
    this.route.paramMap.switchMap(({id}) => {
        this.formDisabled = true;
        return this.service.get(id);
    })
])
    .subscribe(([countries, categories, sectors, contact]) => {
        //Assign the dropdown values
        this.countries = countries;
        this.categories = categories;
        this.sectors = sectors;
        //Do the rest
        this.contact = contact;
        this.form.reset(this.contact);
        this.formDisabled = false;
    })

编辑2：

如果您想收听对所有可观察到的分组的更改，无论谁首先排放，请使用combineLatest()：

Observable.combineLatest(
        Observable.forkJoin([
            this.countryService.getAll(),
            this.categoryService.getAll(),
            this.sectorService.getAll()
        ]),
        this.route.paramMap.switchMap(({id}) => {
            this.formDisabled = true;
            return this.service.get(id);
        })
    )
        .subscribe(([countries, categories, sectors, contact]) => {
            //Assign the dropdown values
            this.countries = countries;
            this.categories = categories;
            this.sectors = sectors;
            //Do the rest
            this.contact = contact;
            this.form.reset(this.contact);
            this.formDisabled = false;
        })