角度4折線圖數據不顯示來自http的數據獲取

我正在嘗試使用Angular 4和chart.js使用由http get方法提供的數據庫中的數據創建折線圖。現狀是奇怪：角度4折線圖數據不顯示來自http的數據獲取

export class ValvesComponent implements OnInit { 
    valves: Valve[]; 
    ignitions: number[] = [8, 5, 8, 9, 5, 3]; 
    dates: Date[]; 
    selectedValve: Valve; 
    lineChartData: Array<any>; 

    constructor(private dataService: DataService) { 
    this.dataService.getIgnitions().then(ignitions => this.ignitions = ignitions); 
    this.lineChartData = [{data: this.ignitions, label: 'Series Z'}]; 
    }

我聲明陣列點火：使用隨機值數[]。然後在構造函數中，我爲這個折線圖數據設置了新的值，但它不起作用。當我在html文件中列出所有點火值時，一切正常，數據與我的get方法返回一樣。但圖表仍顯示舊的。這是我如何得到這些數據：

getIgnitions(): Promise<number[]> { 
    return this.http.get(this.ignitionsUrl) 
    .toPromise() 
    .then(response => response.json() as number[]) 
    .catch(this.handleError);

}

，並在從控制器端的Java方法。

@GetMapping("/valve/findallignitions") 
public Integer [] findAllIgnitions() { 
    Iterable<Valve> valvess = valveRepository.findAll(); 
    List<Integer> valves = new ArrayList<>(); 
    Integer [] valvesArray = {1}; 
    for (Valve v : valvess) { 
     valvesArray = addElement(valvesArray, v.getIgnition()); 
    } 
    return valvesArray; 
}

我應該怎麼做，使工作正常，獲取數據FRM HTTP GET在我的折線圖？

在此先感謝您的幫助！

來源

2017-12-03 up94up

這與NG2-圖表的一個常見問題，你將不得不調用再拉法這樣NG2，圖表知道更新chart.Because它不看數據的變化，你必須手動告訴它更新。

您的組件內部

@ViewChild(BaseChartDirective) private _chart;

參考，並刷新圖表如下，

forceChartRefresh() { 
     setTimeout(() => { 
     this._chart.refresh(); 
     }, 10); 
    } 


constructor(private dataService: DataService) { 
    this.dataService.getIgnitions().then(ignitions => this.ignitions = ignitions); 
    this.lineChartData = [{data: this.ignitions, label: 'Series Z'}]; 
    this.forceChartRefresh(); 
    }

來源

2017-12-03 02:04:36 Sajeetharan

角度4折線圖數據不顯示來自http的數據獲取

回答

相關問題