从 Angular 2 中 Chartist 的 API 获取数据答案

【问题标题】：Get data from an API for Chartist in Angular 2从 Angular 2 中 Chartist 的 API 获取数据
【发布时间】：2017-03-08 00:14:56
【问题描述】：

我正在尝试使用来自我的 Node.js API 的数据使用 Chartist 构建图表。在 Chartist 的文档中有一个这样的异步数据示例：

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 的调用的数据来 resolve 我的 Promise，但除了 Observable 之外没有返回任何内容。我不确定我必须如何处理这个：s 这是我的 Angular 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 而不是Observable 来调用我的API，但我不知道它会如何解决我的问题...

任何帮助:)

【问题讨论】：

标签： javascript api angular promise observable

【解决方案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();

【讨论】：

这两种情况似乎都有效，但我遇到了这个错误：EXCEPTION: data.normalized.series[seriesIndex].forEach is not a function
我认为这与这个问题无关，您可能需要检查您的数据。看起来您的系列中的某些元素不是数组，因此无法使用 forEach 函数。
为什么当我创建一个以相同方式执行的重新加载函数时，我得到一个空的 Promise ？ reloadChart() { this.chartData = this.dataService.getChartData().toPromise(); }
getChartData() 返回什么？
一个ObservablegetChartData(): Observable<Chartist.IChartistData> { return this.http.get(this.urlChartData) .map((resp: Response) => resp.json()) .catch(this.handleError); }