2017-07-02 106 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並具有不同的方法簽名。我沒有注意到它。那是一個愚蠢的錯誤。謝謝您的幫助。

相關問題