如何在angular2中使用“ Rx Observable”解決雙擊

Question

let button = document.querySelector('.mbtn');
let lab = document.querySelector('.mlab');

let clickStream = Observable.fromEvent(button,'click');

let doubleClickStream = clickStream 
        .buffer(()=> clickStream.throttle(250))
        .map(arr => arr.length)
        .filter(len => len === 2); 

doubleClickStream.subscribe(event =>{
        lab.textContent = 'double click';
}); 

    doubleClickStream.throttle(1000)
        .subscribe(suggestion =>{
            lab.textContent = '-';
        });

但這是我的angular2項目中的錯誤，誰可以幫助我解決它，這是錯誤日志↓

/Users/genilex3/Desktop/meager/angularRxjs/angularrxjs/src/app/app.component.ts中的錯誤（58,15）：類型'（）=> any'的參數無法分配給類型'Observable'的參數。 類型（（）=> any）中缺少屬性'_isScalar'。

/Users/genilex3/Desktop/meager/angularRxjs/angularrxjs/src/app/app.component.ts（58,41）中的錯誤：類型為'number'的參數不能分配給類型為'（value：{}）的參數=> SubscribableOrPromise”。

Answer 1

您應該對流使用bufferTime 。

let doubleClickStream = clickStream 
      .bufferTime(250)
      .map(arr => arr.length)
      .filter(len => len === 2);

在這里您可以閱讀更多信息： http : //reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-bufferTime

如果要在設置后1000毫秒后清除值，則應使用debounceTime方法。

doubleClickStream.debounceTime(1000)
    .subscribe(suggestion =>{
        lab.textContent = '-';
    });

在這里您可以閱讀有關debounceTime更多信息： http : //reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounceTime