Angular 2服務沒有更新到組件

我有一個服務調用正在從MongoDB獲取數據。這部分似乎正在工作，它在控制檯中正確記錄。Angular 2服務沒有更新到組件

此響應相當大，完全可能需要8秒才能完成數據。爲此，我希望能夠在檢索到數據後更新組件中的data[]。

我目前的解決方案不起作用，我想知道實時檢索此問題的正確和最佳做法。即使回覆需要更長時間。

服務徵集的getData

export class DataService { 
dataArray: any[]; 
constructor(private http: Http){} 

//get all data 
getData(): any { 
    console.log('Api is calling getData...'); 
    this.http.get('http://localhost:8080/api/data').map((res: Response) => res.json()).subscribe((res: any) => { 
     this.dataArray = res; 
    console.log('JSON: ' + this.dataArray); 
    return this.dataArray; 
}); 
} 
}

這是正常進口到沒有錯誤的MainComponent。

MainComponent

export class MainComponent implements OnInit{ 
data: Array<any>; 
//Inject service here to use for getting data 
constructor(private dataService: DataService){} 

ngOnInit(){ 
    //Set View Data with Request from Server 
    this.data = this.dataService.getData(); 
    console.log("Data: " + this.data); 
} 
}

正如你可以在這裏猜我的日誌中MainComponent不顯示相應的數據和實際顯示undefined。這恰好是我似乎無法逾越的錯誤。我知道必須有一個簡單的解決方案，但由於某種原因，我找不到直接的答案。

這就是我希望來到這裏，是如何更新MainComponent陣列的答案時，該服務已經收到請求

來源

2017-05-30 Keeano

[等待來自服務器的HTTP請求的答覆可能的複製在Angular 2中]（https://stackoverflow.com/questions/38316300/waiting-for-an-answer-from-server-on-http-request-in-angular-2） – Matt

可能的重複[如何返回在angular2中的Observable/http/async調用的響應？]（https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call -in-angular2） – n00dl3

我想你應該在你的服務，並在返回可觀察數據您的MainComponent訂閱它（內側訂閱做數據的初始化），從角度文檔

實施例：

heroService：

getHeroes(): Observable<Hero[]> { 
return this.http.get(this.heroesUrl) 
       .map(this.extractData) 
       .catch(this.handleError); 
}

一些組件

this.heroService.getHeroes() 
       .subscribe(
       heroes => this.heroes = heroes, 
       error => this.errorMessage = <any>error);

Check documentation

來源

2017-05-30 08:33:02 kriss

你能否提供一個清晰的例子？這也會被其他查看這篇文章的人使用。 – Keeano

@Keeano剛剛做過 – kriss

這解決了我的問題，我喜歡你的回答，與之前我的看法相比。我只是沒有足夠慢地通過文檔，錯過了那些重要的小事。 – Keeano

就扔其他選擇在那裏，如果你不想訂閱。

就像一個旁註，即使下面的工作，它會打印響應，它不會因爲這是異步的，並且在完全接收數據之前執行console.log。但是，如果它的工作，

this.data = this.dataService.getData(); 
console.log("Data: " + this.data);

data將是一個可觀察，你仍然必須訂閱。它可以像kriss建議的那樣完成，或者您可以將其保留爲：this.data = this.dataService.getData();，然後使用async管道，該管道爲您訂購。因此，如果數據是一個數組，你會然後做在你的模板如下：

<div *ngFor="let d of data | async"> 
    {{d.myProperty}} 
</div>

剛拋出這個選項在那裏:)

來源

2017-05-30 09:01:02 Alex

Angular 2服務沒有更新到組件

回答

相關問題