HTTP PUT 请求 Returns 清空来自 Angular 2 服务

Question

我正在从服务调用数据。我必须传入一个具有属性的对象来检索数据。据我所知，我正确地传递了它并且没有在控制台中收到任何错误，但是我分配给数据的对象是空的。我在输出数据的地方包含了我的服务和组件。

我从具有相同 "payload" 值的 Angular1 应用程序调用完全相同的端点，并返回我的数据对象。我确定我错过了一些简单的东西。还在习惯 Angular 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());
  }
}

组件

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

异步操作不适用于同步方式。您必须等到 ajax 完成。服务调用解决后，您只能在 getQr 函数的订阅中看到数据。

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

HTTP PUT 请求 Returns 清空来自 Angular 2 服务

HTTP PUT Request Returns Empty From Angular 2 Service

angularjs

angular-http

angular-services

angular