如何使用rxjs

时间:2016-11-24 09:02:44

标签: javascript angular rxjs reactive-programming rxjs5

我正在使用这个但是区间运算符想要在可观察对象上它不存在于范围内,是否有一种方法可以发出例如发出60个整数,间隔为1秒的可观察对象,我一直在这样做

 this.clock = Observable.range(1,60);
 this.clock = this.clock.interval(1000).map(function(value){
     console.log(value)
     return value;
 })

它的说法间隔不是函数

也尝试了这个:

 this.clock = Observable.range(1,60).interval(1000).map(function(value){
     console.log(value)
     return value;
 })

3 个答案:

答案 0 :(得分:5)

序列从1到60,时间间隔为1秒:

Observable
  .interval(1000)
  .map(x => x + 1) // to start from 1 instead of 0
  .map(x => console.log(x)) // do some logic here
  .take(60)
  .subscribe();

这里的输出是:

1
2
3
.
.
.
58
59
60

这是一个可以运行以查看输出的代码段:



// just to have the working demo on SO
let output = '';
let divToUpdate = document.getElementById('counter');

// observable
Rx.Observable
  .interval(1000)
  .map(x => x + 1) // to start from 1 instead of 0
  .map(x => {
    output = `${output}<br>${x}`;
    divToUpdate.innerHTML = output;
  })
  .take(60)
  .subscribe();
&#13;
<div id="counter"></div>

<script src="https://npmcdn.com/rxjs@5.0.0-beta.7/bundles/Rx.umd.js"></script>
&#13;
&#13;
&#13;

答案 1 :(得分:3)

Angular2:PLUNKER DEMO

export class App {
  name:string;

  constructor() {
    this.name = 'Angular2'

    let rangeObs = Observable.zip(
      Observable.range(0, 10), 
      Observable.interval(1000), 
      c => c);

    rangeObs.subscribe(i => this.name = i;);
  }
}

答案 2 :(得分:1)

var clock = Observable
              .interval(100)
              .take(60)
              .map(function(value){
                console.log(value)
                return value;
              });

使用take(count)。