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) => {
});
angular 2ベータとRxJS 5でこれを試しています。問題なく3つのイベントを取得し、1秒あたりのキープレスを計算します。エラーが発生するのはなぜですか? 3秒で止めたい。
これは、この質問の続きです: angular 2 Rxjs を使用して 1 秒あたりのキープレス数をカウントする
アップデート
ソースを別の方法で定義して、スローしないようにする方法を見つけました。
// 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() で機能しないのはなぜですか? この関数で completed() メソッドを定義する方法もわかりません。したがって、デフォルトである必要があります。
また、エラーメッセージから得られた情報から、 Observable.create に .complete() が必要であることをどのようにすばやく見つけることができますか? 最近、何時間も考えて試してみたところ、完了した（）関数が必要になるかもしれません。
アップデート
実際、最後に更新したコードが正しく動作しません。エラーが発生しなくなります。
最後の更新で何が起こるかというと、キーを押さないと 0 回と 3 回のイベントが発行されます。押すと、合計1のイベントが発行され、発行が停止します。
アップデート：
Web パック スターターでの再現方法:
angular 2 webpackスターターバージョン5.0.3をインストールします（バージョン3でもエラーが発生しました）。
ところで、package.json を Rxjs ベータ 4 からベータ 2 に変更する必要がありました。そうしないとインストールに失敗していたからです。
そして、home.comoponent.ts ngOnInit() 関数にhttps://jsbin.com/fafuladayi/edit?js,console,outputとほぼ同じコードを入れます
唯一の違いは、Rx.Observable の代わりに Observable を使用し、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 の例が機能しない理由も理解したいと思います。
ところで、Birowsky が古いバージョンを使用していることもわかります - rxjs@5.0.0-alpha.8 。この URL に beta.2 を含めようとしましたが、エラー Rx not found: https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.2/dist/global/Rx.js in jsbin が表示されます.com