从Angular 2中的图表API获取数据

Question

我试图用图表构建一个图表，数据来自我的Node.jsAPI。在图表文档中有一个异步数据的例子，如下所示：

class AsyncChartComponent {
  data: Promise<Chartist.IChartistData>;
  type: Promise<ChartType>;

  constructor() {
    // simulate slow API call
    this.data = new Promise(function(resolve: any): void {
      setTimeout(function(): void {
        resolve(data['Pie']);
      }, 5000);
    });

    this.type = new Promise(function(resolve: any): void {
      setTimeout(function(): void {
        resolve('Pie');
      }, 5000);
    });
  }
}

但是我使用Observable从API获取数据，我无法处理Promise和Observable。。。我试图用调用API的数据解析我的promise，但除了可观察的之外，没有返回任何内容。我不确定该如何处理这个问题：这是我的角度2分量：

export class RatesComponent implements OnInit {
  @Output() changed = new EventEmitter<IRate>();

  rates: IRate[] = [];
  selectedRate: IRate;
  errorMessage: string;
  chart: Chart;
  chartData: Promise<Chartist.IChartistData>;
  type = 'Line';

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.getRates()
        .subscribe(
          (data: IRate[]) => {
            this.rates = data;
          },
          (error) => this.errorMessage = <any>error
        );

    this.chartData = new Promise((resolve: any): void => {
      resolve(this.dataService.getChartData());
    });

    this.dataService.getChartData()
        .subscribe(
          (data: Chartist.IChartistData) => {
            return data;
            // console.log(this.chartData);
          },
          (error) => this.errorMessage = <any>error
        );

    this.chart = {
      type: 'Line',
      data: JSONdata['Line2']
    };
  }

  select(rate: IRate) {
    this.selectedRate = rate;
    this.changed.emit(rate);
  }
}

也许我应该使用Promise来调用我的API，而不是可观察的，但是我不知道它将如何解决我的问题...

任何帮助：）




Answer 1

试试这个：

this.chartData = new Promise((resolve: any): void => {
   this.dataService.getChartData().subscribe((data: Chartist.IChartistData) => {
     resolve(data);
   },
     (error) => this.errorMessage = <any>error;
   );
});

您也可以尝试以下方法：

this.chartData = this.dataService.getChartData().toPromise();