Angular 2无法读取未定义属性“subscribe”类型错误: 无法读取未定义属性“subscribe”。

Question

我在stackoverflow上尝试了许多方法来解决这个错误，但是现在我只需要问一下，因为我已经花费了很多时间，却没有任何进展。

我有一个简单的服务：

constructor(private http: Http, private tokenResolver: TokenResolver) {}

public getEventHistory(): Observable<heatmapElement[]> {

  this.tokenResolver.getToken(true).subscribe(token => {
    var headers = new Headers();
    headers.append('Authorization', 'Bearer ' + token);
    headers.append('Content-Type', 'application/json');

    this.result = this.http.get(this.restApi, new RequestOptions({headers: headers}))
        .map((res: Response) => res.json());
  });

  return this.result as Observable<heatmapElement[]>;
}

我想使用以下代码获取数据：

public demoData: heatmapElement[] =[];

getEventHistory(): void {
  this.eventHistoryService.getEventHistory()
                          .subscribe(data => this.demoData = data,);
}

这创建了一个错误，我似乎无法修复：

异常: 在http://localhost:5555/app/dashboard/dashboard.html:13:8中引起的错误：无法读取未定义的属性'subscribe' 类型错误: 无法读取未定义的属性'subscribe'

非常感谢您的帮助， 谢谢

- jibjapda

Answer 1

奇怪的是，在我的情况下，经过大量的调试后，发现我在使用一个 Output(@Output) EventEmitter 属性来处理自定义事件时，Angular 在模板中无法识别我的属性或自定义事件属性：

例如： <custom-component (keydownEvent)="someFunctoin()"></custom-component> 对于我的问题而言，上述方法的问题在于 (keydownEvent) 不是有效的事件处理程序，但是为什么在开发时它可以工作，而在构建项目后却不能工作呢？更奇怪的是，ng build --prod 没有发出任何错误或警告！

解决方案： <custom-component keydown="someFunctoin()"></custom-component> 那么订阅者/订阅相关的错误在哪里呢？

嗯，正如你所想象的那样，一个人订阅了 EventEmitter - 所以我想这就是它们之间的关联。

- Hlawuleka MAS

---

谢谢，我和你一样遇到了事件发射器的问题，浪费了很多时间查看我使用的服务方法。你的答案解决了我的问题。 - Harish

同样的问题，但我通过在子组件中创建（而不仅仅是声明）事件发射器来解决了它。例如：@Output() closePopUp: EventEmitter<boolean> = new EventEmitter<boolean>(); - Tom

Answer 2

在异步调用的 subscribe 方法之外，你不能返回结果。

如果你想要从 getEventHistory() 返回一个 Observable ，可以将 subscribe 改为 map 或者 switchMap。

public getEventHistory(): Observable<heatmapElement[]> {

  return this.tokenResolver.getToken(true).switchMap(token => {
    var headers = new Headers();
    headers.append('Authorization', 'Bearer ' + token);
    headers.append('Content-Type', 'application/json');

    return this.http.get(this.restApi, new RequestOptions({headers: headers}));
  })
  .map((res: Response) => res.json() as heatmapElement[]);
}

- Pengyy

---

我认为这段代码不会起作用，因为它在 getEventHistory() 方法的范围内没有返回任何内容。 - eko

@echonax 同意。我试图将 subscribe 更改为 map :) 并返回 this.tokenResolver.getToken，但不确定这是否有效。 :P - Pengyy

谢谢您的提议，但很遗憾它并不起作用，正如echonax所述。 - jibjapda

哦天啊！太感谢了！我花了很多时间来尝试修复这个问题！ - jibjapda