javascript - 从 Angular 2 中 Chartist 的 API 获取数据

Question

我正在尝试使用来自 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 调用中的数据来解析我的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 来调用我的 API，而不是 Observable，但我不知道它如何解决我的问题...

任何帮助:)

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();