Question

我有一个随机数据服务，我想公开一个可观察的XyPoint对象数组。它应该首先填充一个初始点，然后每秒将另一个点推到它上面

import { Injectable }       from '@angular/core';
import { Observable }       from 'rxjs/Observable';


import { NamedPoint } from '../types/chart';


@Injectable()
export class RandomDataService {

    data: Observable<Array<XyPoint>>
    constructor() {

        this.data = new Observable((observer) =>{
            observer.next(this.getPoint())
            setInterval(
                observer.next(this.getPoint()), 1000
            );
        })
    }

    getPoint() {
        let p = new XyPoint()
        p.y = Math.floor(Math.random() * 6) + 1
        return p
    }

    getData(): Observable<Array<XyPoint>>  {
        return this.data
    }

}

然后，我想在图表组件中订阅此服务：

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { RandomDataService } from '../../services/random.data.service';

@Component({
    moduleId: module.id,
    selector: 'basic-chart',
    providers: [RandomDataService],
    templateUrl: 'basic.chart.html',
    styleUrls: ['basic.chart.css']

})

export class BasicChart {
    options: Object;
    chart : Object;

    constructor(private randomDataService: RandomDataService){
    }

    ngOnInit() {
        this.options = {
            title : { text : 'simple chart' },
            chart: {
                type: 'spline',
                width: 700
            },
            series: [{data: []}]
        };
    }

    saveInstance(chartInstance) {
        this.chart = chartInstance;
        this.randomDataService.getData().subscribe(
            value => (this.chart as any).series[0].addPoint(value)
        );

    }

}

我希望订阅getData（）observable的每个组件都会收到相同的数据，这就是我将数据设置为成员变量并在构造函数中实例化的原因。

它最初起作用，因为我将两个点推入我的组件，然后没有其他消息......

Answer 1

愚蠢的错误，我需要为setInterval提供一个函数......

 this.data = new Observable((observer) =>{
        observer.next(this.getPoint())
        setInterval(
            () => observer.next(this.getPoint()), 1000
        );
 )

Answer 2

我不确定，你正在尝试做什么，但我认为你可能希望你的观察中不断有新的观点。

您的代码存在的问题是，它会在1000ms后发出一个点和一个延迟，并且observable保持打开状态。

this.data = new Observable((observer) =>{
        observer.next(this.getPoint())
        setInterval(
            observer.next(this.getPoint()), 1000
        );
    })

您可以使用此代码瞬间，每1000毫秒产生一个点。

this.data = Observable.timer(0, 1000)
  .timeInterval()
  .pluck('interval')
  .map(() => this.getPoint());

Angular2 Service公开一个Observable集合，每秒更新一次

2 个答案: