HTTP PUT請求返回空從角2服務

我正在調用服務的數據。我必須傳入一個包含屬性的對象才能檢索數據。從我可以告訴，我正確地傳遞它並沒有在控制檯中收到任何錯誤，但我分配給數據的對象是空的。我在輸出數據時將我的服務和組件包括在內。HTTP PUT請求返回空從角2服務

我使用相同的「有效負載」值從Angular1應用程序調用完全相同的端點並獲取我的數據對象。我確定我錯過了一些簡單的東西。還是習慣角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(); 
    } 

}

來源

2017-03-09 billy_comic

它會的。它是一個異步調用。 console.log被觸發而不用等待其餘的完成。避免這些問題的方法或技巧可能是一件簡單的事情 - 避免在分配時使用單線功能。 – Gary

異步操作不起作用同步方式。你必須等到ajax完成。一旦解決了服務調用，您只能在getQr函數的訂閱中看到數據。

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

來源

2017-03-09 16:50:26

這完美的作品。問題：數據實際上是從OP的語法中返回的，而我的console.log（）發生在數據返回之前？或者是否需要添加包含{}的語法才能檢索異步數據？ –

是的，控制檯語句在ajax完成之前被調用，因爲它是同步操作。瀏覽器在異步之前執行同步操作。 –

HTTP PUT請求返回空從角2服務

回答

相關問題