Angular - Piping returned observable from method call which has a conditional in it - Cannot read property 'subscribe' of undefined

Question

I am trying to pipe the returned observable from a save method for a component.

Inside this save method based on a condition a dialog is opened which waits for a user input before making the call to the update endpoint and returning the result as an observable which is then ultimately returned by the save() method.

The issue is that I am trying to pipe the result of that save() to check the value has been emitted and then navigate away from the component. As the.subscribe() is executing before the value has been returned.

A summary of the code looks like this:

save() : Observable<Address> {
let value = this.form.get('Address').value
if (JSON.stringify(this.address) != JSON.stringify(value.Address)) {
  const ref = this.dialog.open(AddressChangeDialog);
  ref.componentInstance.canSave = this.form.valid;
  ref.afterClosed().pipe(map(result => {
    if (result) {
      switch (result) {
        case AddressChangeDialog.Save:
          //Save the form (returns the observable here)
          return this.addressService.put(value)
        case AddressChangeDialog.Discard:
          // Cancel the save
          break;
        default:
          break;
      }
    }
  }));
}
else {
  // if the address hasnt changed just save and return the observable
  return this.addressService.put(value)
 }
}

This is then called by another method

  onSaveButtonClick() {
    this.save().subscribe();
  }

The problem I am having is that when the address has changed and it opens the dialog I get an error on the.subscribe() due to the fact that the save() method hasnt returned anything yet.

Any help will be much appreciated as Ive been scratching my head for a while now.

Thanks!

Answer 1

When using map() you always have to return something. There are several cases when you don't return anything. Return null at least.

save() : Observable<Address> {
    let value = this.form.get('Address').value

    if (JSON.stringify(this.address) != JSON.stringify(value.Address)) {
        const ref = this.dialog.open(AddressChangeDialog);
        ref.componentInstance.canSave = this.form.valid;

        ref.afterClosed().pipe(map(result => {

            if (result) {
 
               switch (result) {
                   case AddressChangeDialog.Save: 
                   //Save the form (returns the observable here)
                   return this.addressService.put(value)
    
                   case AddressChangeDialog.Discard:
                   // Cancel the save

                   // no return value
                   break;

                   // no return value
                   default:
                   break;
               }

            }

            // no return value
            // You always have to return something. So here we
            // return null in case no other return is called before
            return null;
        }));
    }
    else {
        // if the address hasnt changed just save and return the observable
        return this.addressService.put(value)
    }
}