rxjs合并在angular5中没有按预期工作

时间:2017-12-30 02:47:44

标签: javascript angular typescript merge rxjs

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/merge';

this.events = this.availableHoursCollection.valueChanges()
this.bla = this.afs.collection<AvailableHour>('users')
  .doc('G2loKLqNQJUQIsDmzSNahlopOyk1').collection('availableHours');

this.test = this.bla.valueChanges();


this.something = Observable.merge(
  this.events,
  this.test
)

this.something只有最后一个可观察的项目,我该如何组合呢? 此外,如果您有具有相同值id的observable,您如何合并值?

1 个答案:

答案 0 :(得分:2)

使用AngularFire测试台,我运行了Rx场景

const merged = Observable.merge(o1, o2)

我得到了一个发出两次的observable,每个发出包含一个数组,这是每个查询的结果。

这让我想知道你是如何检查输出的。如果使用异步管道{{ results | async }}管道到模板,那么第二个发射将覆盖第一个并且给人的印象是只有第二个发出。

如果您非常清楚这一点,请道歉。

如果需要组合两个阵列的单个发射,有很多方法可以实现。此方案的最佳方案是combineLatest()

const combined = Observable.combineLatest(o1, o2)
  .map(([s1, s2]) => [...s1, ...s2])

这是最好的原因是因为.valueChanges()旨在继续推动更改,因此它永远不会完成。所以基于forkJoin()

的方法
Observable.merge(o1.mergeMap(x => x), o2.mergeMap(x => x)).toArray()

两者都需要已完成事件才能发出任何内容,而combineLatest()则不会,并且只要其中一个源更新,组合的observable就会再次发出。