HTTP PUT 요청이 앵귤러 2 서비스에서 비어 있음

Question

서비스에서 데이터를 호출하고 있습니다. 데이터를 검색하기 위해 속성이있는 객체를 전달해야합니다. 내가 말할 수있는 것부터, 올바르게 전달하고 콘솔에서 오류를받지 못하지만 데이터에 할당 한 객체가 비어 있습니다. 데이터를 출력 할 곳에서 서비스 및 구성 요소를 포함합니다.

동일한 "페이로드"값을 가진 Angular1 App에서 정확히 동일한 끝점을 호출하고 내 데이터 객체를 반환합니다. 나는 간단한 것을 놓치고 있다고 확신한다. 아직 동기 방식으로 작동하지 않는 각도 2.

서비스

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

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class DataService { 
private qrDataUrl = 'http://my.data.url/endpoint'; 

private payload = { 
    DeliveryTypeId: 0, 
    PickupLocationid: 0, 
    PaymentTypeId: 0, 
    Items: ['XXXX'], 
    ApplicationToken:'123MYTOKEN456', 
    DateOfBirth: "1961-01-01T00:00:00.000Z" 
}; 

    constructor(private http: Http){ } 

    getQr():Observable<any>{ 
    return this.http.put(this.qrDataUrl, this.payload) 
    .map((res:Response) => res.json()); 
    } 
} 

COMPONENT

import { Component, OnInit } from '@angular/core'; 
import { DataService } from '../shared/dataService'; 

@Component({ 
    selector: 'my-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.scss'], 
    providers: [DataService] 
}) 
export class HomeComponent implements OnInit { 
    qrData = { }; 

    constructor(private dataService: DataService) { 
    // Do stuff 
    } 



    getData(){ 
    this.dataService.getQr().subscribe(data => this.qrData = data); 
    console.log(this.qrData); //This logs an empty object 
    } 

    ngOnInit() { 
    console.log('Hello Home'); 
    this.getData(); 
    } 

} 

Answer 1

비동기 작업에 익숙해. 아약스가 완료 될 때까지 기다려야합니다. 서비스 호출이 해결되면 getQr 기능의 구독 내에서만 데이터를 볼 수 있습니다.

getData(){ 
    this.dataService.getQr().subscribe(data => { 
     this.qrData = data; 
     console.log(this.qrData); //This logs an empty object 
    }); 
}