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服务没有更新到组件

回答

相关问题