RxJs. Why a subject emits only once after mergeMap?

Question

I have a few links, which one represents a user's active order. When a user clicks on it, I want to send an HTTP DELETE request to an API. I have a function in my component ts file, which get called from my template like so:

// Component
interface CancelCommand {
    orderId: string
}
private cancelCommands = new Subject<CancelCommand>();

/* Get called from a template on click, like so 
          <a ... (nzOnConfirm)="cancel(ord.id)">Cancel</a> */
cancel(orderId: string) {
    this.cancelCommands.next({
        orderId: orderId
    })
}

I'm subscribing to the Subject cancelCommands in my ngOnInit:

// Component
ngOnInit(): void {
    this.cancelSub = this.cancelCommands.pipe(
        mergeMap((command) => this.service.cancelOrder(command)))
    ).subscribe()
}

In the service the cancelOrder function just calling HttpClient

// The Service
cancelOrder(command: CancelCommand) : Observable<CommandResponse> {
      return this.http.delete<CommandResponse>(`${this.url}/${command.orderId}`)
}

My question is, why does the observable with this.cancelSub subscription stops emitting values after first order's cancellation?

Answer 1

@PilgrimViis Have you checked if the observable this.cancelSub really completes?

@TmTron I checked if mergeMap completes when the source observable completes which is not the case here: https://stackblitz.com/edit/rxjs-qthnmy?devtoolsheight=33&file=index.ts