Kann nicht mit Winkel 2

Question

Daten von node.js Server erhält ich Winkel lerne 2 und ich versuche also in Winkel 2.en

Daten von einem Knoten-Server mit Hilfe der Dienstleistungen zu erhalten Ich habe einen Winkel Komponente mit einer Schaltfläche. Nachdem ich auf diese Schaltfläche geklickt habe, sollte ein Angular Service eine Anfrage an den Server stellen und die Antwort in eine Variable holen. Aber meine Variable bleibt immer undefiniert. Hier

ist der Code des Dienstes:

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

Hier ist der node.js Code:

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

Hier ist der Code meiner home-page:

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

Ich deklariere auch den LoginService im Provider-Array in @NgModule. Meine Daten Komponente ist sehr einfach:

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

Außerdem verwende ich Ionic 2, aber ich glaube nicht, das den Fehler verursachen würde.

Hoffe Jungs, du könntest mir helfen. Cheers,

Andrej

Answer 1

Da die getData() Methode von Ihrem LoginService kehrt ein Observable (das ist async) müssen Sie sie abonnieren die Antwort

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

Sie benötigen Funktion aufzurufen abonnieren http Anruf zu tätigen.

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

    } 

Sie können in Winkel 2 here mehr über HTTP-Client finden.

Answer 3

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

} 

Dieses Stück Code gibt observable zu bekommen.

So müssen Sie zu subscribe zu observable, um die Daten zu erhalten, wie unten gezeigt,

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

}