如何使用interval更新observables数组？

Question

我正在尝试为使用angular 2和chart.js（通过ngcharts）的图表构建一个仪表板。我想有一个图表阵列，每个图表通过自定义时间间隔内的http请求进行更新。

现在我有三个单独的图表调用，将数据推送到一个数组。我在遇到下一次迭代时遇到了麻烦 - 如果再次推入阵列，我最终会得到3个图表。我希望阵列中的订阅者在间隔发出时使用新数据进行更新。

对于如何正确构造我的用例的组件/服务/ http关系，我有点困惑。我觉得我很接近，但我肯定错过了一些东西。如何获取间隔/订户关系以映射到视图并在一个时间间隔内更新现有图表？ 任何帮助将是伟大的！

现在：

服务：

我在这里实施的时间间隔：

getSingleChartObsinterval(id: number, interval: number) : Observable<Graph> { 

return Observable.interval(interval).flatMap(() => this.getSingleChartobs(id));   
} 


getSingleChartobs(id: number) : Observable<Graph> { 

    return this.jsonp.get(“api location”) 
      .map(response => this.extractJsonData(response, id) as Graph) 
} 

extractJsonData只是采取响应和操纵它与图表JS工作。它返回一个Graph对象，该对象具有易于使用的属性。我无法控制API，因此我无法重新配置响应以包含多个图。

组件：

import { Component } from '@angular/core'; 
import { ChartsModule } from 'ng2-charts/ng2-charts'; 
import { ChartService } from './chart.service'; 
import { Graph } from './graph'; 
import { OnInit } from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 


@Component({ 
    selector: 'ab-chart', 
    styles: [` 
    .chart { 
     display: block; 
    } 
    `], 
    templateUrl: 'app/chart.component.html' 
}) 
export class ChartComponent implements OnInit { 

    ngOnInit(): void { 
     console.log("Chart component init"); 

     this.getSingleChart(3, 5000); 
     this.getSingleChart(5, 4000); 
     this.getSingleChart(6, 5000); 
    } 

    graph: Graph; 
    graphs: Graph[] = []; 


    constructor(
     private chartService: ChartService 
    ) {} 


    getSingleChart(id: number, interval: number): void { 
    this.chartService.getSingleChartObsinterval(id, interval) 
     .subscribe(x => 
     this.graphs.push(x) 
    ); 
} 
} 

的观点：

<div *ngFor="let graph of graphs" class="chart-container"> 
    <base-chart 
     class="chart" 
     [datasets]="graph.datasets" 
     [labels]="graph.labels" 
     [options]="graph.options" 
     [chartType]="graph.type"> 
     </base-chart> 
    </div> 

Answer 1

由于每个图都有自己id（我假设它是唯一的），所以我只希望改变getSingleChart()方法在特定键上更新graphs对象。请注意，我改变了graphs属性从一个数组对象：

graphs: {[key: number]: Graph} = {}; 

getSingleChart(id: number, interval: number): void { 
    this.chartService.getSingleChartObsinterval(id, interval) 
    .subscribe(x => this.graphs[id] = x); 
} 

get graphIds() { 
    return Object.keys(this.graphs); 
} 

然后在你需要遍历键阵列模板（可以迭代graphs对象：

<div *ngFor="let id of graphIds" class="chart-container"> 
    <base-chart 
     class="chart" 
     [datasets]="graphs[id].datasets" 
     [labels]="graphs[id].labels" 
     [options]="graphs[id].options" 
     [chartType]="graphs[id].type"> 
    </base-chart> 
</div> 

Answer 2

你有图表的数量有限？如果你总是有三个，你可以利用combineLatest运算符（如果你有更多的话，你将不得不使用某种形式的递归，我猜）。

在你的组件，你可以做到以下几点：

this.graphs = this.getSingleChart(3, 5000).combineLatest(
     this.getSingleChart(5, 4000), 
     this.getSingleChart(6, 5000), 
     (val1, val2, val3) => return [val1, val2, val3]) 
     //.subscribe((arrayOfVal) => console.log(arrayOfVal); 

这将每一个图表中获取更新时间返回一个新的数组。如果图2得到一个新值，函数（combineLatest的第三个参数）将被调用，旧值为1，新值为2，旧值为3。

在模板你可以只使用此：

<div *ngFor="let graph of graphs | async" ...> 

CombineLatest：https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/combinelatest.md