2017-11-30 3 views
3

각도 프런트 엔드가 포함 된 Django REST API가 있습니다. 프런트 엔드에서 오류가 발생하지 않지만 json 데이터가 콘솔에 로깅되지 않습니다.JSON 데이터가 Django REST API에서 전달되지 않음

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import 'rxjs/add/operator/map'; 


@Injectable() 
export class WeatherstatsService { 

    constructor(private http:Http) { 
    console.log("Hello World"); 

    this.getWeatherData(); 
    // this.getWeatherDataRecords(); 
    } 

    weatherdata: any = {}; 

    private _WeatherStatsUrl = 'http://127.0.0.1:8000/weatherstats/weatherdata'; 

    getWeatherData() { 
    return this.http.get(this._WeatherStatsUrl) 
     .map((res:Response) => res.json()); 
    } 

    getWeatherDataRecords() { 
    this.getWeatherData().subscribe(weatherdata => { 
     console.log(weatherdata) 
    }) 
    } 
} 

지금과 같은 구성 요소를 공급 :

나는 서비스과 같이이

import { Component, OnInit } from '@angular/core'; 
import { WeatherstatsService } from '../weatherstats.service'; 

@Component({ 
    selector: 'weather-stats', 
    templateUrl: './weather-stats.component.html', 
    styleUrls: ['./weather-stats.component.css'] 
}) 
export class WeatherStatsComponent implements OnInit { 

    data: any; 

    constructor(private weatherstatsservice: WeatherstatsService) { } 

    ngOnInit() { 

    console.log(this.weatherstatsservice.getWeatherData().subscribe(data => this.data = data)); 

    } 

} 

내가 얻을 브라우저에서 API를 테스트 할 때 내가 장고와 각도 모두에 새로운 오전 내가 원하는 데이터. 무슨 일이 일어날 수 있다는 것은 내 json 데이터를 볼 수 없다는 것을 의미합니까? (지금 유사한 문제에 도움을 시도 사람들에게 사과와 - 나의 뇌는이 모든 새로운 물건으로 폭발한다!)

콘솔 :

Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …} 
    closed 
    : 
    false 
    destination 
    : 
    SafeSubscriber {closed: false, _parent: null, _parents: null, _subscriptions: null, syncErrorValue: null, …} 
    isStopped 
    : 
    false 
    syncErrorThrowable 
    : 
    false 
    syncErrorThrown 
    : 
    false 
    syncErrorValue 
    : 
    null 
    _parent 
    : 
    null 
    _parents 
    : 
    null 
    _subscriptions 
    : 
    Array(1) 
    0 
    : 
    MapSubscriber {closed: true, _parent: null, _parents: null, _subscriptions: null, syncErrorValue: null, …} 
    length 
    : 
    1 
    __proto__ 
    : 
    Array(0) 
    __proto__ 
    : 
    Subscription 
+0

각도 앱과 장고는 다른 포트에서 실행 중입니까? – itzMEonTV

+0

아 그래! 나쁘다고 생각해? 아니면 좋은가요? 하나는 포트 8000에서 실행되고 다른 하나는 포트 4200에서 실행 중입니다. – Davtho1983

+0

콘솔에 오류가 있습니까? – Alex

답변

4

당신은 지금 구독을 기록 콘솔, 그래서 출력 당신은 당신의 콘솔에 들어가고 있습니다. 콘솔에 응답을 기록하려면 다음을 수행하십시오.

this.weatherstatsservice.getWeatherData() 
    .subscribe(data => { 
    this.data = data; 
    console.log(this.data) 
    }) 
+0

그리고 이것이 새로운 것을 제안한다면이 글을 읽을 수 있습니다 : https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call- in-angular2 매우 일반적인 함정은 가입하지 않고 데이터에 접근하여 머리를 위로 올려 보는 것입니다. :) – Alex

관련 문제