Observable.fromEvent（）bufferTimeにを（使用）（3）に乗り、（）サブスクライブ - 最後のイベントが

Question

var source = Observable.fromEvent(document.body, 'keypress'); 


var obs = source 

    .bufferTime(1000) 

    .map((clickBuffer) => { 

    console.log(clickBuffer) 

    return clickBuffer.length; 
    }) 

    .take(3) 

; 

// when using this function - error after 3rd event 
obs.subscribe((num) => { 

}); 

を放出された後に、エラー「ヌルのプロパティを読み取ることができません 『スプライス』を」私は、角2ベータ版でこれをしようとしていますし、 RxJS 5.それは問題なく3つのイベントを取得し、毎秒キー押下を計算します。エラーが発生するのはなぜですか？私は3秒後にそれを止めたい。

これは、この質問の続きです： Counting keypresses per second with angular 2 Rxjs

更新

は、ソース別の方法を定義し、投げない作り方ケースが見つかりました：

// there are functions in typescript class 
// onKeypressReactBuffer is called from angular template on input field keypress 
class K { 

    onKeypressReactBuffer() {} 


    reactiveWay() { 

    const source = Observable.create(observer => { 

     // next(1) - we will use this value to add 
     this.onKeypressReactBuffer =() => { 
      observer.next(1);  


      // this make it not throw the error. 
      observer.complete('ha') }; 
     }); 

    } 
} 

だから、まだ疑問が残っています - なぜfromEvent（）関数ではうまくいかないのですか？私はまた、この機能に完成（）メソッドを定義する方法が表示されません。だから、いくつかのデフォルトにする必要があります。

も ​​- どのように私は（Observable.createのために、私は.completeが必要だと速く見つけることができる）の情報から、エラーメッセージが私を与えましたか？それはごく最近しようとする私の頭にポップ思考の時間の後に - 多分それは完成（）関数を必要とします。

更新

実は私の最後の更新されたコードは正しく動作しません。それは私にエラーを与えるのを止めるだけです。前回のアップデートで何が起こる

がある - それが0のイベントと3回キーを押していない場合を発します。一度押す - それは、合計1のイベントを放出し、発光を停止します。

更新：ウェブパックスターターに再現する方法

：

角度2 WebPACKのスターターバージョン5.0.3（バージョン3にも、私はエラーを得た）をインストールします。

Btw Rxjsベータ4からベータ2へpackage.jsonを変更する必要がありました。これは、別の方法でインストールすることができなかったためです。

：コードを参照してください -

そしてhome.comoponent.tsでngOnInit（）関数はhttps://jsbin.com/fafuladayi/edit?js,console,output

とほぼ同じコードを置く唯一の違いは、代わりにRx.Observableの観察可能な使用と観測をインポートすることです

import {Component} from 'angular2/core'; 
import {AppState} from '../app.service'; 

import {Title} from './title'; 
import {XLarge} from './x-large'; 

import { Observable, Subject } from 'rxjs/Rx'; 

@Component({ 
    // The selector is what angular internally uses 
    // for `document.querySelectorAll(selector)` in our index.html 
    // where, in this case, selector is the string 'home' 
    selector: 'home', // <home></home> 
    // We need to tell Angular's Dependency Injection which providers are in our app. 
    providers: [ 
    Title 
    ], 
    // We need to tell Angular's compiler which directives are in our template. 
    // Doing so will allow Angular to attach our behavior to an element 
    directives: [ 
    XLarge 
    ], 
    // We need to tell Angular's compiler which custom pipes are in our template. 
    pipes: [ ], 
    // Our list of styles in our component. We may add more to compose many styles together 
    styles: [ require('./home.css') ], 
    // Every Angular template is first compiled by the browser before Angular runs it's compiler 
    template: require('./home.html') 
}) 
export class Home { 
    // Set our default values 
    localState = { value: '' }; 
    // TypeScript public modifiers 
    constructor(public appState: AppState, public title: Title) { 

    } 

    ngOnInit() { 
    console.log('hello `Home` component'); 
    // this.title.getData().subscribe(data => this.data = data); 


    var source = Observable.fromEvent(document.body, 'keypress'); 


    var obs = source 

     .bufferTime(1000) 

     .map((clickBuffer) => { 

      //console.log(clickBuffer.length) 

      return clickBuffer.length; 
     }) 

     .take(5) 

     ; 

    // when using this function - error after 3rd event 
    obs.subscribe((num) => { 

     console.log(' home ' + num) 

    }); 


    } 

    submitState(value) { 
    console.log('submitState', value); 
    this.appState.set('value', value); 
    } 

} 

Thierry Templierの例が動作しますが、なぜこのスターターパックでBirowskyの例が機能しないのか理解したいと思います。

Btwまた、Birowskyは古いバージョン - rxjs@5.0.0-α8を使用しています。私はこのURLでbeta.2を含めるしようとしたが、その後私は、エラーRxが見つからない取得： jsbin.comでhttps://npmcdn.com/@reactivex/rxjs@5.0.0-beta.2/dist/global/Rx.js

Answer 1

私はあなたがデータフローを停止するtakeUntilオペレータを提供するために、専用の件名を使用することができることを考えます。そのような何か：それはここでエラーをスローしません

var source = Observable.fromEvent(document.body, 'keyup'); 

var stop = new Subject(); 
Observable.interval(3100).subscribe(() => stop.next()); 

var obs = source.bufferTime(1000).map(clickBuffer => { 
    console.log(clickBuffer); 
    return clickBuffer.length; 
}).takeUntil(stop); 

obs.subscribe((num) => { 
    console.log('num = '+num); 
});