javascript - mergeMap() RXJS 3 可观察量

Question

我看了一个关于如何在 2 个可观察对象上使用 mergeMap() 的教程，但我仍然不清楚如何将它与超过 2 个可观察对象一起使用。

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

这里是 3 个可观察对象的代码，用于连接三个输入并在 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()。
为了使事情更简单，我将在每个 fromEvent 之后映射 event.target.value，并且可能会抛出 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>