Angular 2服务未更新到组件

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>

只是把这个选项扔出去:)