RxJs，不是在dom中显示，而是控制台工作

Question

为什么输出只显示在一个元素中（#skip-result或#signal-result）而不是两个元素？

但如果我尝试从下面的那两个可观察的输出结果到控制台它的工作原理

你可以检查代码here

var input$ = Rx.Observable.fromEvent(input,'input')


var x$ = input$
  .debounce(1000)



// skip two character in string, from input value
// then, display it in #skip-result
x$
  .map(v=> v.target.value)
  .filter(v=> v.length > 2)
  .flatMap(v=> 
           Rx
             .Observable
             .from(v)
             .skip(2)
             .reduce((x,y)=> x + y)
  )
  .subscribe(s=>{
    $('#skip-result').text('Skip Value is ' + s)
  })



// search distinct in string, from input value
// then, display it in #distinct-result
x$
  .map(e=> e.target.value)
  .filter(e=> e.length > 0)
  .flatMap(v=> 
           Rx
             .Observable
             .from(v)
             .distinct()
             .reduce((x,y)=> x + y)
  )
  .subscribe(x=>{
    $('#distinct-result').text('Distinct value is ' +x)
  })

Answer 1

在您引用的JSBin中，您还没有导入jQuery，但您似乎正在使用jQuery选择器来设置#skip-result和#distinct-result DOM元素的内容。这会引发错误。

如果您改为将它们更改为设置innerHTML属性，哪个订阅已经在执行，您应该得到预期的行为。

.subscribe(s => {
  skipResult.innerHTML = 'Skip Value is ' + s
})

EDIT

再看一下，您的标记没有正确关闭。具体来说，#skip-result正在成为#distinct-result的孩子。