Angular2 Observable HTTP Data未填充

我對Angular2相當陌生，並且想要從JSON文件加載數據。我讀了AngularIO文章並做了教程，但我仍然需要一些幫助。我將「獲取數據」分解爲一個加載數據和組件的apiService，它從apiService獲取數據。Angular2 Observable HTTP Data未填充

因爲這個問題比較簡單，所以我想直接將數據加載到沒有apiService的組件。

這是成分：

export class StatusComponent implements OnInit { 

    private status = {}; 
    private error: string; 

    constructor(private router: Router, private variables: Variables, private apiService: ApiService, private http: Http) { 
     if (!this.variables.getIsLoggedIn()) { 
      this.router.navigate(['login']); 
     } 
    } 

    ngOnInit() { 
     this.getStatus(); 
    } 

    getStatus() { 
     this.http.get('../app/apiFiles/status.json') 
     .map((res:Response) => res.json()) 
     .subscribe(
     data => { this.status = data}, 
     err => console.error(err), 
     () => console.log('done') 
    ); 
     console.log(JSON.stringify(this.status)); 
    } 
}

這是JSON：

{ 
    "status": { 
    "timercount": "0", 
    "reccount": "0" 
    } 
}

在組件中，getStatus()被正確加載，經過沒有發生錯誤，但變量i填status沒有填滿。 getStatus()之後的變量仍然是{}。此外，console.log(JSON.stringify(this.status));的輸出是{}。

我希望有人能幫助我解決它！非常感謝！

來源

2016-10-25 Junias

這是因爲在http調用完成後執行console.log(JSON.stringify(this.status));。請記住，所有http調用都是異步方法。試試這個：

getStatus() { 
    this.http.get('../app/apiFiles/status.json') 
    .map((res:Response) => res.json()) 
    .subscribe(
    data => { this.status = data}, 
    err => console.error(err), 
    () => console.log(this.status); 
); 
}

你會看到因爲經過HTTP調用表被成功完成() => console.log(this.status);執行，這將打印結果。

來源

2016-10-25 13:09:44

謝謝，但沒有，這不是解決辦法：/ – Junias

解決方案是使用'this.status = data.status'，然後加載數據...;）但非常感謝！ – Junias

正確的解決方法是這樣的：

getStatus() { 
     this.http.get('../app/apiFiles/status.json') 
     .map((res:Response) => res.json()) 
     .subscribe(
     data => { this.status = data.status}, 
     err => console.error(err), 
     () => console.log('done') 
    ); 
     console.log(JSON.stringify(this.status)); 
    }

所以，你必須使用data.status，因爲JSON文件以「身份」;）

來源

2016-10-25 13:31:34 Junias

Angular2 Observable HTTP Data未填充

回答

相關問題