Question

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

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

以下是服务的代码：

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，但我不认为，这会导致错误。

希望你们，你们可以帮助我。欢呼声，

的Andrej

Answer 1

您需要调用subscribe函数进行http调用。

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

  }

您可以在角度2 here找到有关http客户端的更多信息。

Answer 2

由于getData()中的LoginService方法返回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);
    });
  }
}

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

}

无法从具有角度2的node.js服务器获取数据

3 个答案: