时间戳

首页 > 解决方案 > Angular EventEmitter 返回未定义的对象

angular - Angular EventEmitter 返回未定义的对象

问题描述

我正在为学校做一个项目，但由于我对 Angular 的缺乏经验而碰壁了。我有一个带有一堆复选框选择的左侧导航组件，当用户选择其中一个“代码”时，API 调用会转到我们的数据存储以检索给定“键”的所有值

this.dataService.getData(key);

从那时起，我有了一个不同的组件，它正在侦听数据的检索，然后制作一个图表。我面临的问题是数据服务成功地进行 API 调用并返回 JSON 响应，但我无法弄清楚如何将该数据/对象传递给时间图。

private segResponse$: Observable<SegmentResponse>;    
@Output() dataRetrieved: EventEmitter<Observable<SegmentResponse>> = new EventEmitter();
    ...
getData(key: string) {
    this.segResponse$ = this.httpClient.get<SegmentResponse>(this.baseUrl + key);
    console.log('seg resp in service ' + this.segResponse$);
    this.dataRetrieved.next(this.segResponse$);
}

我可以在这里看到控制台响应很好，但在我的时间图中，对象（SegmentResponse 类型）是未定义的。“状态”只是 SegmentResponse 的属性（字符串）之一。

ngOnInit() {
  this.dataService.dataRetrieved.subscribe( data => {
  this.segResponse = data;
  console.log('time graph got data ' + this.segResponse.state);
  });
}

那么为什么它首先是未定义的呢？我需要做什么才能将 SegmentReponse 从数据服务成功转移到时间图？我猜 .next 部分不是在等待 httpClinet.get 的成功返回，但就像我说的那样，我对 Angular + search-fu 的知识处于边缘，能够找到正确的单词去查找得到解决方案。

标签： angulartypescript

解决方案

httpClient.get 返回一个 Observable。您需要订阅它。

getData(key: string) {
    this.segResponse$ = this.httpClient.get<SegmentResponse>(this.baseUrl + key).subscribe((response) => {
        console.log('seg resp in service ' + response);
        this.dataRetrieved.next(response);
    });
}

推荐阅读