TypeScript/RxJS - Observable subscribe() method complete() not running

Question

I've had a good look around to try and solve this but can't find an answer that works.

I'm trying to implement a callback for an additional function when a subscribe() method successfully returns an 'contacts$' observable, but using complete() on the subscription does not do anything.

I've also tried using finally() on the observable as suggested elsewhere, but this also doesn't work.

Using complete():

ngOnInit() {
    this.getContacts().subscribe(
        data => {
            this.contacts = data;
            console.log('NewInvoice.contacts:', data);
            this.selectedContactId = this.contacts[0].id;
            console.log('selectedContactId: ' + this.selectedContactId);
        },
        error => {
            console.error('Error getting contacts via subscribe() method:', error);
        },
        () => {
            this.getSelectedContact();
        }
    )
}

Using finally():

ngOnInit() {
    this.getContacts()
        .finally(() => console.log('a'))
        .subscribe(
            data => {
                this.contacts = data;
                console.log('NewInvoice.contacts:', data);
                this.selectedContactId = this.contacts[0].id;
                console.log('selectedContactId: ' + this.selectedContactId);
            },
            error => {
                console.error('Error getting contacts via subscribe() method:', error);
            },
            () => {
                this.getSelectedContact();
            }
    )
}

Method for callback on observable completion:

getSelectedContact() {
    this.contactsCollection.doc(this.selectedContactId).ref.get().then(snapshot => {
        this.selectedContact = snapshot.data() as Contact;
        console.log('selectedContact:', this.selectedContact);
    })
}

@Roham Rafii - That answer to that post literally describes how to do what I've shown in my question is not working... — nick.cook
What's the value of this.selectedContactId inside getSelectedContact()? Is the value already set when getSelectedContact() is called? — Lynx 242
There are a few differences. That answer uses finally, catch and subscribe . — Roham Rafii

pliski pliski · Accepted Answer · 2018-03-28T20:50:57

Difficult to say without more info, but I'll give a shot:

  ngOnInit() {
    this.getContacts()
      .subscribe(
        data => {
          this.contacts = data;
          console.log('NewInvoice.contacts:', data);
          this.selectedContactId = this.contacts[0].id;
          console.log('selectedContactId: ' + this.selectedContactId);
        },
        error => {
          console.error('Error getting contacts via subscribe() method:', error);
        },
        () => {
          this.getSelectedContact()
            .asObservable()
            .subscribe((a) => console.log(a));
        }
      )
  }

And :

getSelectedContact() {
    return this.contactsCollection.doc(this.selectedContactId).ref.get().then(snapshot => {
        this.selectedContact = snapshot.data() as Contact;
        console.log('selectedContact:', this.selectedContact);
    })
}

Or a little cleaner :

    const callback = (a) => console.log(a);
  ...
    () => {
      this.getSelectedContact(callback);
    }
  ...
    getSelectedContact(callback) {
      this.contactsCollection.doc(this.selectedContactId).ref.get()
        .then(snapshot => {
          this.selectedContact = snapshot.data() as Contact;
          console.log('selectedContact:', this.selectedContact);
        })
        .then(a => callback(a));
    }

Lastly as @Picci suggested :

this.getContacts()
    .last()
    .exhaustMap((data) => this.getSelectedContact(data))
    .map(a => console.log(a))
    .subscribe();

Beware that all the above code is absoultely not tested and only for reference.

TypeScript/RxJS - Observable subscribe() method complete() not running

1 Answers