從Angular 2中的Chartist獲取數據

我試圖用Chartist與來自Node.js API的數據構建圖表。在憲章的文檔有這樣的異步數據的例子：從Angular 2中的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 ... 我嘗試resolve我的Promise與從我的API調用的數據，但沒有返回期望Observable。我不知道我怎麼也得處理這個：■ 這裏是我的角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，但我看不出它如何將解決我的問題......

任何幫助:)

來源

2017-03-07 Hugo-Contreras

試試這個：

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

來源

2017-03-07 16:06:15

這似乎在這兩個情況下工作，但我得到這個錯誤： ''例外：data.normalized.series [seriesIndex] .forEach不是function'' –

我不認爲這是連接到這個問題，你可能想檢查你的數據。它看起來像你的系列的一些元素不是一個數組，因此不能使用forEach函數。 –

爲什麼當我用相同的方式創建一個重載函數時，我得到了一個空的''Promise''？ ''reloadChart（）{ this.chartData = this.dataService.getChartData（）。toPromise（）; }'' –

從Angular 2中的Chartist獲取數據

回答

相關問題