RXJS 代码段给出："this._next不是函数"，当创建和调用可观察量时

Question

const myObservable = new rxjs.Observable(
   function(observer1){
        let button = document.getElementById('mybutton');
        //alert(observer1.error);
        button.addEventListener("click",observer1.next);
        alert(button);
        ///observer1.next(1);
    }
);
const myObserver = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};
myObservable.subscribe(myObserver);

这个想法是，在evry click上，应调用观察者。单击按钮时，为什么我会遇到"不函数"错误？

Answer 1

const myObservable = new rxjs.Observable(
function(observer1){
alert('invoked');
let button = document.getElementById('mybutton');
var clickHandler = (arg) => observer1.next(arg);
button.addEventListener("click",clickHandler);
//alert("event listener added and myFun invoked");
//observer1.next(1);
}

);
const myObserver = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};
myObservable.subscribe(myObserver);
alert("ran it");

这个想法是将observer1.next调用包装在一个函数中，因为它需要使用对象上下文来调用。

Answer 2

根据此示例，它应该是三个参数，而不是1个具有3个属性的对象。

  var observer = Rx.Observer.create(
      x => console.log(`onNext: ${x}`),
      e => console.log(`onError: ${e}`),
      () => console.log('onCompleted'));
    observer.onCompleted();

有您的调整后代码

 let button = document.getElementById('mybutton');
 const myObservable= Rx.Observable.fromEvent(button , 'click')   
    myObservable.subscribe(
         x => console.log('Observer got a next value: ' + x),
         err => console.error('Observer got an error: ' + err),
         () => console.log('Observer got a complete notification')
    );

有http://reactivex.io/documentation/operators/subscribe.html

的示例

var observer = Rx.Observer.create(
  function (x) { console.log('Next: %s', x); },
  function (err) { console.log('Error: %s', err); },
  function () { console.log('Completed'); });
var source = Rx.Observable.range(0, 3)
var subscription = source.subscribe(observer);

您可以看到static rx.observer.greate方法的三个参数。

https://jsfiddle.net/dhkoaufr/1/