Question

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

我使用相同的＆＃34;有效负载＆＃34;从Angular1 App调用完全相同的端点。值并返回我的数据对象。我确定我错过了一些简单的事情。还是习惯了Angular 2。

SERVICE

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

异步操作不同步工作。你必须等到ajax完成。一旦服务呼叫解决，您只能在getQr功能的订阅中查看数据。

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

HTTP PUT请求从Angular 2服务返回空

1 个答案: