如何使用间隔更新可观察的数组？

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

您的图表数量有限吗？如果你总是有三个，你可以利用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" ...>

结合最新：https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/combinelatest.md

Answer 2

由于每个图都有自己的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>