Question

我在服务'work-orders.service.ts'中有一个http get：

getWorkOrderById(workOrderID: number): Observable<any> {
    const options = new RequestOptions({
      headers: new Headers({
        'Accept': 'application/json',
        'Access-Control-Allow-Origin': '*'
      })
    });
    return this.http.get(uri + `/api/workorder/${workOrderID}`, options)
      .map(response => response.json())
      .catch(this.handleErrorObservable);
  }

并在'report-view.component.ts'中使用该服务我有：

export class ReportsViewComponent implements OnInit {
.
.
  wEndTime: string;
  wStartTime: string;

然后我有

的Constrauctor

constractor (private workOrderService: WorkOrdersService)

ngOnInit() {

   this.getWorkOrder(this.workOrderId); // I get 'workOrderId' as @Input


}

和功能：

getWorkOrder(id) {
    this.workOrderService.getWorkOrderById(id)
      .subscribe( (response) => {
        console.log(response);
        this.wStartTime = response.WorkOrderStartTime;
        this.wEndTime = response.WorkOrderEndTime;
      }) ;
  }

一切正常，但我发现this.wStartTime和this.wEndTime始终是未定义的，并且没有从响应中获取值。响应是一个对象。

有什么问题，如何从响应中获取数据？ “外面的世界”？

Answer 1

我相信您在'work-orders.service.ts'文件中不需要.map(response => response.json())。

我知道fetch包使用response.json（）（它返回一个将解析为响应JSON对象的promise），但对于angulars http包，他们已经解析了对JSON对象的响应。因此，您应该能够直接从订阅成功回调中获得的响应对象中访问this.wStartTime = response.WorkOrderStartTime;和this.wEndTime = response.WorkOrderEndTime;。

Answer 2

将函数传递给getWorkerOrder

getWorkOrder(id, fn) {
    this.workOrderService.getWorkOrderById(id)
    .subscribe( (response) => {
        fn(response.WorkOrderStartTime, response.WorkOrderEndTime);
     }) ;
}

然后：

var a, b;
var self = this;
// Could be more like typescript, sorry.
function someConsumer(a, b) {
   self.a = a; // this.a should be bound by Angular
   self.b = b; // b as well
}

ngOnInit() {
   this.getWorkOrder(this.workOrderId, someConsumer); 
}

Answer 3

经过长时间的尝试并与他人协商，我发现了问题，并与您分享解决方案。当我使用Http Observables进行连续 API调用时，问题就解决了。就像在我的代码中一样，我有两个连续的HTTP API调用（仅是我给出的代码中的最后一个！）。碰巧在第二个HTTP请求中我没有得到结果：

this.wStartTime = response.WorkOrderStartTime; this.wEndTime = response.WorkOrderEndTime;

在这种情况下，解决方案是使用异步/等待功能。这样做：

async ngOnInit()
{
 firstCallToAPI();
 await secondCallToAPI(); // where I'm doing the this.wStartTime = response.WorkOrderStartTime; ect.
}

希望有帮助！

在Angular http get getbe响应中获取Undefined变量

3 个答案: