【问题标题】:Angular 2 TypeError: Cannot read property 'subscribe' of undefinedAngular 2 TypeError:无法读取未定义的属性“订阅”
【发布时间】:2017-07-02 14:29:34
【问题描述】:

我有一个用于添加新事件或编辑现有事件的表单。我检查 URL 参数,如果存在 id,那么我想从 EventService 订阅 editEvent 方法,否则从 EventService 订阅 addEvent 方法并添加新事件。添加一个事件可以正常工作,而如果在 URL 中传递了一个 ID,那么我会收到一个错误,例如 Cannot read property 'subscribe' of undefined。我在 editEvent 方法中返回了一个 observable(与 addEvent 相同),它没有嵌套在另一个调用中。下面是我的代码。

<form class="form-horizontal" [formGroup]="addEventForm" (ngSubmit)="addEvent()">

event-entry.component.ts

addEvent() {
        console.log(this.addEventForm.value);
        if(this.editedEventId){
            console.log('editing event');
            //If the editedEventId is passed via url then we are Editing an event
          this.eventService.editEvent(this.editedEventId,this.addEventForm.value).subscribe(
                data => console.log(data),
                error => console.log(error)
            );
        }else{
            console.log('adding event');
            //else we are creating an event
             this.eventService.addEvent(this.addEventForm.value).subscribe(
                data => console.log(data),
                error => console.log(error)
            );
        }

        //to reset the form after submission
        this.addEventForm.reset();
    }

event.service.ts

addEvent(event:Events) {
        this.events.push(event);
        const body = JSON.stringify(event);
        const headers = new Headers({
            'Content-Type': 'application/json'
        });
        return this.http.post('http://localhost:3000/event', body, {
            headers: headers
        })
            .map((response:Response) => response.json())
            .catch((error:Response) => Observable.throw(error.json()));
    }

editEvent(eventId:number, event:Events){
        console.log('Entering editEvent in event service');
        let url = 'http://localhost:3000/event/'+eventId;
        const body = JSON.stringify(event);
        const headers = new Headers({
            'Content-Type': 'application/json'
        });
        return this.http.put(url, body, {
            headers: headers
        })
            .map((response:Response) => response.json())
            .catch((error:Response) => Observable.throw(error.json()));

    }

我是 Angular 2 的新手。我尝试了所有在线可用的解决方案(例如使用 switchMap),但没有一个有效。错误的完整堆栈跟踪。

ERROR TypeError: Cannot read property 'subscribe' of undefined
    at EventEntryComponent.addEvent (eval at <anonymous> (bundle.js:901), <anonymous>:120:86)
    at Object.eval [as handleEvent] (EventEntryComponent.html:3)
    at handleEvent (eval at <anonymous> (bundle.js:132), <anonymous>:12120:138)
    at callWithDebugContext (eval at <anonymous> (bundle.js:132), <anonymous>:13412:42)
    at Object.debugHandleEvent [as handleEvent] (eval at <anonymous> (bundle.js:132), <anonymous>:13000:12)
    at dispatchEvent (eval at <anonymous> (bundle.js:132), <anonymous>:9020:21)
    at eval (eval at <anonymous> (bundle.js:132), <anonymous>:10948:20)
    at SafeSubscriber.schedulerFn [as _next] (eval at <anonymous> (bundle.js:132), <anonymous>:4069:36)
    at SafeSubscriber.__tryOrUnsub (eval at <anonymous> (bundle.js:87), <anonymous>:238:16)
    at SafeSubscriber.next (eval at <anonymous> (bundle.js:87), <anonymous>:185:22)
    at Subscriber._next (eval at <anonymous> (bundle.js:87), <anonymous>:125:26)
    at Subscriber.next (eval at <anonymous> (bundle.js:87), <anonymous>:89:18)
    at EventEmitter.Subject.next (eval at <anonymous> (bundle.js:151), <anonymous>:55:25)
    at EventEmitter.emit (eval at <anonymous> (bundle.js:132), <anonymous>:4043:76)
    at FormGroupDirective.onSubmit (eval at <anonymous> (bundle.js:434), <anonymous>:4859:23)
    at Object.eval [as handleEvent] (EventEntryComponent.html:3)
    at handleEvent (eval at <anonymous> (bundle.js:132), <anonymous>:12120:138)
    at callWithDebugContext (eval at <anonymous> (bundle.js:132), <anonymous>:13412:42)
    at Object.debugHandleEvent [as handleEvent] (eval at <anonymous> (bundle.js:132), <anonymous>:13000:12)
    at dispatchEvent (eval at <anonymous> (bundle.js:132), <anonymous>:9020:21)
    at eval (eval at <anonymous> (bundle.js:132), <anonymous>:9612:20)
    at HTMLFormElement.eval (eval at <anonymous> (bundle.js:441), <anonymous>:2735:53)
    at ZoneDelegate.invokeTask (eval at <anonymous> (bundle.js:4472), <anonymous>:424:31)
    at Object.onInvokeTask (eval at <anonymous> (bundle.js:132), <anonymous>:4346:37)
    at ZoneDelegate.invokeTask (eval at <anonymous> (bundle.js:4472), <anonymous>:423:36)
    at Zone.runTask (eval at <anonymous> (bundle.js:4472), <anonymous>:191:47)
    at HTMLFormElement.ZoneTask.invoke (eval at <anonymous> (bundle.js:4472), <anonymous>:486:38)

任何帮助将不胜感激。

【问题讨论】:

  • 发布错误的完整堆栈跟踪。此外,您不需要对正文进行字符串化并设置内容类型标头。 Angular 会为您做到这一点。
  • 谢谢。添加了错误的完整堆栈跟踪。
  • 我真的不明白您发布的代码会如何发生此错误。确保所有内容都已保存。确保重建项目。确保您没有使用将从其他文件导入的其他服务。

标签: angular observable


【解决方案1】:

验证函数签名。改变

editEvent(eventId:number, event:Events){

editEvent(eventId:string, event:Events){

【讨论】:

  • 我找到了问题所在。还有另一个具有相同名称的方法 editEvent 并具有不同的方法签名。我没有注意到它。那是一个愚蠢的错误。感谢您的帮助。
【解决方案2】:

我发现了问题所在。还有另一个具有相同名称的方法 editEvent 并具有不同的方法签名。我没有注意到它。那是一个愚蠢的错误。感谢您的帮助。

【讨论】:

    猜你喜欢
    • 2018-02-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-06-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多