не удается получить данные с сервера Node.js с угловым 2

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

Я также объявляю LoginService в массиве поставщиков в @NgModule. Мой компонент данных очень прост:

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

Кроме того, я использую Ионные 2, но я не думаю, что это вызовет ошибку.

Надеюсь, ребята, я мог бы помочь мне. Приветствия,

Андрей

Answer 1

Поскольку метод 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 2

Вы должны вызвать функцию подписки, чтобы сделать HTTP вызов.

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

    } 

Вы можете узнать больше о HTTP клиента в угловом 2 here.

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

}