mergeMap() RXJS 3观测资料

Question

我看了一篇关于如何在两个可观察对象上使用mergeMap()的教程，但对于如何在两个以上的可观测对象上使用它，我仍然非常不清楚。

下面是教程的链接：https://www.youtube.com/watch?v=b59tcUwfpWU&t=1s

下面是三个可观察到的连接三个输入并在html上动态显示的代码。

​

var input1 = document.querySelector('#input1');
var input2 = document.querySelector('#input2');
var input3 = document.querySelector('#input3');

var span = document.querySelector('span');

var obs1 = Rx.Observable.fromEvent(input1, 'input');
var obs2 = Rx.Observable.fromEvent(input2, 'input');
var obs3 = Rx.Observable.fromEvent(input3, 'input');


obs1.mergeMap((event1) => {
	return obs2.map((event2) => {
  	return event1.target.value + ' ' + event2.target.value;
  });
}).mergeMap((result) => {
	return obs3.map((event3) => {
  	return result + ' ' + event3.target.value;
  });
}).subscribe((combinedValue) => {
	console.log(combinedValue);
	return span.textContent = combinedValue;
})

<script src="https://unpkg.com/@reactivex/rxjs@5.3.0/dist/global/Rx.js"></script>

<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">

<p>Combined value: <span></span></p>

​

我在这里的问题是，当我输入第一个和第二个输入时，在我输入第三个输入之前，显示器不会动态地显示更改。

我目前对mergeMap()的理解是，它将一系列可观测数据压缩成可观测的序列。

Answer 1

我想你需要接线员combineLatest()。

为了使事情更简单，我会在每个event.target.value之后映射fromEvent，也许还会添加startWith('')，因为在用户输入之前什么都不会发生。

​

console.clear()
var input1 = document.querySelector('#input1')
var input2 = document.querySelector('#input2');
var input3 = document.querySelector('#input3');

var span = document.querySelector('span');

var obs1 = Rx.Observable.fromEvent(input1, 'input')
  .map(e=>e.target.value)
  .startWith('')

var obs2 = Rx.Observable.fromEvent(input2, 'input')
  .map(e=>e.target.value)
  .startWith('')

var obs3 = Rx.Observable.fromEvent(input3, 'input')
  .map(e=>e.target.value)
  .startWith('')

Rx.Observable.combineLatest(obs1,obs2,obs3)
.map(([val1,val2,val3]) => val1 + ' ' + val2 + ' ' + val3) 
.subscribe((combinedValue) => {
	console.log(combinedValue);
	return span.textContent = combinedValue;
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.7/Rx.js"></script>

<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">

<p>Combined value: <span></span></p>

​