无法使用angular度2从node.js服务器获取数据

我正在学习angular2，我正试图从服务angular度2的帮助下从节点服务器获取数据。

所以我有一个button的angular度组件。 点击这个button之后，angular度服务应该向服务器发出一个请求，并将响应提取到一个variables中。 但是我的variables始终未定义。

这里是服务的代码：

import { Observable } from 'rxjs/Rx'; // Import RxJs required methods import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; @Injectable() export class LoginService { constructor (private http: Http) { } private dataUrl = 'http://localhost:1337'; getData() : Observable<Data[]> { return this.http.get(this.dataUrl) .map((res:Response) => res.json()); //.catch((error:any) => Observable.throw(error.json().error || 'Server error')); } } 

这里是node.js代码：

 var http = require('http'); var port = 1337; var data = "Hi"; http.createServer(function(req, res) { res.writeHead(200, {"Content-Type": "text/plain"}); res.write(data); res.end("Hi"); }).listen(port); console.log('Server running on port %s', port); 

这是我的主页的代码：

 import { NavController } from 'ionic-angular'; import { Data } from '../../data/data.component'; import { Component, Input, Output, EventEmitter } from '@angular/core'; import { LoginService } from '../../services/login/login.service'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public data: string; constructor( private loginService: LoginService ){} getData() { this.data = this.loginService.getData()[0].data; console.log(this.data); } } 

我还在@NgModule的providers数组中声明了LoginService。 我的数据组件非常简单：

  export class Data { constructor( public data: string){} } 

除此之外，我使用离子2，但我不认为这会导致错误。

希望家伙，你可以帮助我。 干杯，

安德烈

Answer 1

由于你的LoginService的getData()方法返回一个Observable （asynchronous），你需要订阅它来获得响应

 import { NavController } from 'ionic-angular'; import { Data } from '../../data/data.component'; import { Component, Input, Output, EventEmitter } from '@angular/core'; import { LoginService } from '../../services/login/login.service'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { public data: string; constructor( private loginService: LoginService ){} getData() { this.loginService.getData().subscribe((dataFromServer) => { // Now you can use the data console.log(dataFromServer); }); } } 

Answer 2

你需要调用subscribe函数来进行http调用。

 getData() { this.loginService.getData().subscribe((res) => { this.data = res; console.log(this.data); }); } 

你可以在这里find更多关于http client的信息 。

Answer 3

 getData() : Observable<Data[]> { return this.http.get(this.dataUrl) //<<<$$$ returns observable .map((res:Response) => res.json()); } 

这段代码返回observable 。

所以，你需要subscribe observable才能得到如下所示的数据，

 getData() { this.loginService.getData().subscribe((res)=>{ this.data=res; console.log(this.data); }) }