Angular - 如何将多个“valueChanges”可观察对象组合成一个答案

【问题标题】：Angular - How to combine multiple "valueChanges" observables into oneAngular - 如何将多个“valueChanges”可观察对象组合成一个
【发布时间】：2021-03-30 21:07:21
【问题描述】：

如何将以下订阅合并为一个？

    this.form.get("type").valueChanges.subscribe(() => {
        this.calcFinalTransports();
    })
    this.form.get("departure").valueChanges.subscribe(() => {
        this.calcFinalTransports();
    })
    this.form.get("destination").valueChanges.subscribe(() => {
        this.calcFinalTransports();
    })
    this.form.get("stations").valueChanges.subscribe(() => {
        this.calcFinalTransports();
    })

【问题讨论】：

订阅this.form.valueChanges?还是您的意思更像Observable.merge？不清楚。
@AngularInDepth.com 答案正是我需要的？你为什么投反对票？我很清楚

标签： angular rxjs observable

【解决方案1】：

根据您期望的输出，您有几个选择。您可能想阅读这篇文章：

Learn to combine RxJs sequences with super intuitive interactive diagrams

如果您只想在任何值更改时收到通知，请使用merge：

import {merge} from "rxjs/observable/merge";

merge(
    this.form.get("type").valueChanges,
    this.form.get("departure").valueChanges,
    this.form.get("destination").valueChanges
    this.form.get("stations").valueChanges
).subscribe(() => this.calcFinalTransports());

【讨论】：

这似乎在 VSCode 中抛出了一个错误，说 Property 'subscribe' does not exist on type 'UnaryFunction<Observable<{}>, Observable<any>>'.。这在 RxJS5 中是否发生了变化？
@mtpultz，我不知道，我建议你再问一个问题
如果我使用管道合并到初始 observable 上似乎可以工作：first$.pipe(merge(second$, third$,...).subscribe(...);
@MaxKoretskyi 提供的链接不再有效。这个one 似乎是正确的。

【解决方案2】：

如果想使用单个 Data observable 模式并将多个 observable 组合成一个 observable，那么 combineLatest 可能会很有用。

伪代码

userNameAndEmail$=this.userNameAndEmail().pipe(startsWith(null));
userAddressDetail$=this.userAddressDetails().pipe(startsWith(null));
userMiscDetails$=this.userMiscDtls();


completeUserData$=combineLatest([userNameAndEmail$,userAddressDetail$,userMiscDetails$])
.pipe(map(([userNameAndEmail,userAddressDetail,userMiscDetails])=>{  
 return {userNameAndEmail,userAddressDetail,userMiscDetails};  } ));

但是，有一定的条件。 https://www.learnrxjs.io/learn-rxjs/operators/combination/combinelatest

【讨论】：

【解决方案3】：

Max Koretskyi 的解决方案与最新版本的 RxJs 不同步，我也弄错了。

“合并”有 2 个版本：

与：

从'rxjs'导入{merge}；

你可以写：

this.globalChange$ =  merge(this.form.get("type"), this.form.get("departure"), ... )

但是有：

从'rxjs/operators'导入{merge}；

你必须写：

this.globalChange$ =  this.form.get("type").pipe(merge(this.form.get("departure"), ... ) )

注意最后一个版本已被弃用！

【讨论】：