Property 'unsubscribe' does not exist on type 'Observable'

Question

Typescript(tslint in atom editor) is giving me a typescript error, but i cannot figure out how to set the correct type.

Error message:

chat component:

  private _chatObserver: Observable<firebase.database.DataSnapshot>

  otherMethod () {
        this._chatObserver = this._chat.observe(alarmId)
        this._chatObserver.subscribe(
          (messageSnap: firebase.database.DataSnapshot) => {
            this.messages.push(messageSnap.val())
          },
          error => {throw error})
    }

    ionViewDidLeave() {
       this._chatObserver.unsubscribe() 
    }

_chat provider:

  public observe (alarmId){
    let messagesRef = this._ref.child(`alarms/${alarmId}/messages`)

    const observable = Observable.create(observer => {
      messagesRef.on('child_added',(messageSnap) => {
            observer.next(messageSnap)
        },
        (error) => observer.error(error)
      )
      return () => {
        messagesRef.off('value')
      };
    });

    return observable
  }

`unsubscribe` should be called on a `Subscription` - not on an `Observable`. Your call to `subscribe` will return a `Subscription`. — cartant, Oct 24 '17 at 09:24

score 42 · Accepted Answer · answered Oct 24 '17 at 09:24

Unsubscribe is a method on the subscription itself. Hence, add at the top:

private _chatSubscription;

then in your otherMethod:

this._chatSubscription = this._chatObserver.subscribe(...);

And in your destroy/leave/termination handler:

this._chatSubscription.unsubscribe();

Fan Cheung · Answer 2 · 2022-06-14T11:37:22.237

Subscribed observable will return a subscription instance which has unsubscribe() method

private _chatObserver: Observable<firebase.database.DataSnapshot>
private _subscription:Subscription
otherMethod () {
    this._chatObserver = this._chat.observe(alarmId)
    this._subscription=this._chatObserver.subscribe(
      (messageSnap: firebase.database.DataSnapshot) => {
        this.messages.push(messageSnap.val())
      },
      error => {throw error})
}

ionViewDidLeave() {
   this._subscription.unsubscribe() 
}

Property 'unsubscribe' does not exist on type 'Observable'

2 Answers2