RxJS包含多个输入流。如何正确处理这些问题?

RxJS包含多个输入流。如何正确处理这些问题?,rxjs,Rxjs,我在我的应用程序上有五个输入,我想计算最后一个数字中每个输入的总和 到目前为止,我做到了: const input1 = document.querySelector("#text1"); const input2 = document.querySelector("#text2"); const input3 = document.querySelector("#text3"); const input4 = document.querySelector("#text4"); const in

我在我的应用程序上有五个输入,我想计算最后一个数字中每个输入的总和

到目前为止,我做到了:

const input1 = document.querySelector("#text1");
const input2 = document.querySelector("#text2");
const input3 = document.querySelector("#text3");
const input4 = document.querySelector("#text4");
const input5 = document.querySelector("#text5");

function setObservable(selector) {
    return Rx.Observable
        .fromEvent(selector, "input")
        .map(event => parseInt(event.target.value))
        .startWith(0)
}

const input$ = setObservable(input1)
const input2$ = setObservable(input2)
const input3$ = setObservable(input3)
const input4$ = setObservable(input4)
const input5$ = setObservable(input5)


const source = Rx.Observable.combineLatest(input$, input2$, input3$, input4$, input5$)

source.subscribe(value => {
    const totalHTML = document.querySelector(".total");
    const total = value.reduce((acc, curr) => acc + curr, 0);

    totalHTML.textContent = total;
});

这很好用。。。但是有没有更优雅的方法来获取每个输入的值而不指定所有输入的值呢?

当然!让我们将所有选择器存储在一个数组中:

const selectors = ['#text1', '#text2', '#text3', '#text4', '#text5'];
让我们映射这些元素以获得实际元素:

const elements = selectors.map(s => document.querySelector(s));
现在,让我们映射这些元素,得到一组可观察的对象:

const clickStreams = elements.map(setObservable);
最后,我们可以结合最新的(就像您以前做的那样):

const click$ = Rx.Observable.combineLatest(clickStreams);