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 beta和RxJS 5上尝试这个。它获得3个没有问题的事件并计算每秒的按键次数。为什么我会收到错误？我希望它在3秒后停止。

这是这个问题的延续： Counting keypresses per second with angular 2 Rxjs

更新

发现如何make not throw，定义源不同的方式：

// 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 pack starter上重现：

安装angular 2 webpack starter 5.0.3版本（版本3也出错了）。

顺便说一下，我必须将package.json从Rxjs beta 4更改为beta 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。我尝试将beta.2与此url包含在内，但后来我发现错误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);
});

当使用Observable.fromEvent（）bufferTime（）时，取（3）和subscribe（） - 错误＆＃34;无法读取属性＆＃39; splice＆＃39; of null＆＃34;发出最后一个事件后

1 个答案: