node.js - 无法使用 Angular 2 从 Node.js 服务器获取数据

Question

我正在学习 Angular 2，我正在尝试借助 Angular 2 中的服务从 Node 服务器获取数据。

所以我有一个带有按钮的 Angular 组件。单击此按钮后， Angular 服务应该向服务器发出请求并将响应提取到变量中。但我的变量始终未定义。

这是服务的代码:

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){}
 }

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

希望大家能帮助我。干杯，

安德烈

Answer 1

由于 LoginService 中的 getData() 方法返回一个 Observable (异步)，因此您需要订阅它才能获取回应

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);
    });
  }
}