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

Question

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

但是如果我尝试从这两个 observable 中输出结果 下面来控制台它的工作原理

您可以查看代码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
})

编辑

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