Question

我正在进行Service调用以从MongoDB获取数据。这部分似乎正在工作，它在控制台中正确记录。

此响应非常大，可能需要大约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数组的答案

Answer 1

如果您不想订阅，只是抛出另一个选项。

正如旁注一样，即使以下内容可行，它也会打印响应，因为这是异步的，并且在完全接收数据之前执行console.log。但如果有效，

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

data将是 Observable ，您仍需要订阅。它可以像kriss建议的那样完成，或者你可以保留它：this.data = this.dataService.getData();然后使用async管道，它为你做订阅。因此，如果数据是一个数组，那么您将在模板中执行以下操作：

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

只是抛出这个选项：）

Answer 2

我认为您应该在您的服务中返回Observable，并在您的MainComponent中订阅它（在subscribe内部进行数据初始化）

角度文档示例：

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

Angular 2服务未更新到组件

2 个答案: