कोणीय 2 एचटीपी प्रतिक्रिया प्राप्त करें उदाहरण

Question

एंगुलर 2 में http से जेसन डेटा प्राप्त करने का सही तरीका क्या है। मैं कुछ स्थानीय डेटा को एक मॉक एंड एंडपॉइंट के साथ परीक्षण करने पर काम कर रहा हूं, और मैं परिणाम http.get() में देख सकता हूं लेकिन मैं इसे स्थानीय रूप से असाइन नहीं कर सकता है या कुछ समय मुद्दा है।

import {Injectable} from '@angular/core'; 
import {Http} from '@angular/http'; 
import 'rxjs/add/operator/map'; // we need to import this now 

    @Injectable() 
    export class MyHttpService { 
    constructor(private _http:Http) {} 

    getDataObservable(url:string) { 
     return this._http.get(url) 
      .map(data => { 
       data.json(); 
       console.log("I CAN SEE DATA HERE: ", data.json()); 
     }); 
    } 
} 

यहाँ और है मैं कैसे डेटा आवंटित करने के लिए कोशिश कर रहा हूँ: यहाँ मेरी सरल सेवा है

import {Component, ViewChild} from "@angular/core"; 

import { MyHttpService } from '../../services/http.service'; 

@Component({ 
    selector: "app", 
    template: require<any>("./app.component.html"), 
    styles: [ 
     require<any>("./app.component.less") 
    ], 
    providers: [] 
}) 
export class AppComponent implements OnInit, AfterViewInit { 
    private dataUrl = 'http://localhost:3000/testData'; // URL to web api 
    testResponse: any; 

    constructor(private myHttp: MyHttpService) { 
    } 

    ngOnInit() { 
     this.myHttp.getDataObservable(this.dataUrl).subscribe(
      data => this.testResponse = data 
     ); 
     console.log("I CANT SEE DATA HERE: ", this.testResponse); 
    } 
} 

मैं() कॉल में डेटा मैं चाहता हूँ देख सकते हैं, लेकिन मैं डॉन ' प्रतीत होता है कि उस कॉल के बाद इसका उपयोग नहीं है ... कृपया मुझे बताएं कि मैं क्या गलत कर रहा हूं!

Answer 1

यह इस तरह से काम नहीं करना चाहिए। जब डेटा आता है तो देखने योग्य को पासबैक कॉलबैक कहा जाता है। कोड जो इस डेटा तक पहुंचने की आवश्यकता है उसे कॉलबैक के अंदर होना चाहिए।

ngOnInit() { 
    this.myHttp.getDataObservable(this.dataUrl).subscribe(
     data => { 
      this.testResponse = data; 
      console.log("I CANT SEE DATA HERE: ", this.testResponse); 
     } 
    ); 
} 

अद्यतन

getDataObservable(url:string) { 
    return this._http.get(url) 
     .map(data => { 
      data.json(); 
      // the console.log(...) line prevents your code from working 
      // either remove it or add the line below (return ...) 
      console.log("I CAN SEE DATA HERE: ", data.json()); 
      return data.json(); 
    }); 
} 

Answer 2

क्योंकि http कॉल async है। आपको सब्सक्राइब फ़ंक्शन में असाइनमेंट करने की आवश्यकता है। इस तरह प्रयास करें:

this.myHttp.getDataObservable(this.dataUrl).subscribe(
      data => { 
         this.testResponse = data ; 
         console.log("I SEE DATA HERE: ", this.testResponse); 
        } 
     ); 

Answer 3

यहां नमूना उपयोग करने में आसान है जो आपको वादे का उपयोग करने की अनुमति देता है।

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Config } from '../Config'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 

@Injectable() 
export class Request { 

    constructor(public http: Http) 
    { 

    } 

    get(url): Promise<any> 
    { 
     return this.http.get(Config.baseUrl + url).map(response => { 
      return response.json() || {success: false, message: "No response from server"}; 
     }).catch((error: Response | any) => { 
      return Observable.throw(error.json()); 
     }).toPromise(); 
    } 

    post(url, data): Promise<any> 
    { 
     return this.http.post(Config.baseUrl + url, data).map(response => { 
      return response.json() || {success: false, message: "No response from server"}; 
     }).catch((error: Response | any) => { 
      return Observable.throw(error.json()); 
     }).toPromise(); 
    } 
}