仅订阅多个FormControl(s)一次

时间:2018-02-20 09:49:52

标签: javascript angular typescript rxjs

我已经根据一些逻辑从一个大型FormGroup中过滤掉了一些FormControl(我想知道如何合并/组合这些选定的FormControls并且只有一个订阅..

我查看了RxJS文档和大理石图,但没有正确理解它。理解所有这些并知道哪一个用于我的案例是非常令人困惑的:

- forkJoin
- combineLatest
- merge
- join
- zip

以下是有关此问题的更详细信息:

假设2 FormControls(即controlA,controlB)。每当FormControl值发生任何变化时,我都想执行一些handlerFunction。 *每当有任何控制值改变时,它需要执行一次handlerFunction(在我的情况下,任何一个控件都会一次更改)

感谢。

2 个答案:

答案 0 :(得分:9)

最好的选择是combineLatest,它会在所有源Observable发出至少一个值之后发出,然后从任何源发出的Observable发出:

Observable.combineLatest(controlA.valueChanges, controlB.valueChanges)
  .subscribe(...);

最终,您可以使用startWith(null)链接每个来源,以确保每个来源都会立即发出一个项目并过滤您在订阅者中想要的内容。

Observable.combineLatest(
    controlA.valueChanges.startWith(null),
    controlB.valueChanges.startWith(null)
  )
  .subscribe(([val1, val2]) => ...);

顺便说一句,关于其他运营商:

  • zip - 仅在所有来源发出相同数量的项目时发出
  • forkJoin - 当所有来源至少发出一个项目并完成时发出(valueChanges永远不会发生)
  • merge - 只是合并Observables,但你不知道哪一个发出了什么值
  • join - 我认为这不是RxJS 5
  • 的一部分

答案 1 :(得分:0)

对于那些不推荐使用CombineLatest的用户,请尝试将valueChanges observables组合到一个数组中。另外,对于不赞成使用startWith的用户,请尝试不使用null。

combineLatest([
    this.typeSelected.valueChanges.pipe(startWith('')),
    this.checkedFC.valueChanges.pipe(startWith(false))
  ]
).subscribe(([type, checked]) => {
   console.log([type, checked]);
});