2017-07-02 71 views
1

我有一个用于添加新事件或编辑现有事件的单一表单。我检查URL参数,如果存在一个id,我想从我的EventService订阅一个editEvent方法,否则从EventService订阅addEvent方法并添加新事件。添加一个事件工作正常,而如果一个ID在URL中传递,那么我得到一个错误,如无法读取未定义的属性'订阅'。我在我的editEvent方法(与addEvent中的方法相同)中返回可观察值,并且它不嵌套在另一个调用中。以下是我的代码。Angular 2 TypeError:无法读取未定义的属性'subscribe'

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

事件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())); 

    } 

我是新来的角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) 

任何帮助,将不胜感激。

+0

发布错误的完整堆栈跟踪。另外,您不需要对正文进行串联并设置内容类型标题。 Angular为你做到了这一点。 –

+0

谢谢。添加了错误的完整堆栈跟踪。 –

+0

我真的不明白你发布的代码会出现这种错误。确保一切都已保存。确保重建项目。确保你没有使用其他服务,你会从另一个文件导入。 –

回答

2

验证函数签名。更改

editEvent(eventId:number, event:Events){ 

editEvent(eventId:string, event:Events){ 
+0

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

0

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

相关问题