RxJs，未显示在 dom 中，但控制台有效

Question

为什么输出只显示在其中一个元素中 (#skip-result 或 #distinct-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
})

编辑

再次查看后，您的标记未正确关闭。具体来说，#skip-result 正在成为 #distinct-result 的 child。

RxJs，未显示在 dom 中，但控制台有效

RxJs, not display in dom, but console works

rxjs

observable

reactive-programming

observer-pattern

reactive

编辑