angular 2 Observable complete not called

Question

I am playing around with hero app fro angular 2 tutorial and right now i have this Component

import { Component, OnInit } from '@angular/core'
import { Subject } from 'rxjs/Subject';
import { Hero } from "./hero";
import { Router } from "@angular/router";
import { HeroService } from "./hero.service";
import { BehaviorSubject } from "rxjs/BehaviorSubject";


@Component({
    selector: 'hero-search',
    templateUrl: 'app/hero-search.component.html',
    styleUrls: ['app/hero-search.component.css'],
})
export class HeroSearchComponent implements OnInit{
    heroes: Hero[];
    isLoading: BehaviorSubject<boolean> = new BehaviorSubject(false);
    error: any;
    private searchNameStream = new Subject<string>();

    constructor(
        private heroService: HeroService,
        private router: Router
    ) {}

    ngOnInit() {
        this.searchNameStream
            .debounceTime(400)
            .distinctUntilChanged()
            .switchMap(name => {
                this.isLoading.next(true);
                return this.heroService.getHeroesByName(name)
            })
            .subscribe(
                heroes => this.heroes = heroes,
                error => this.error = error,
                () => {
                    console.log('completed');
                    this.isLoading.next(false);
                })
    }

    // Push a search term into the observable stream.
    search(Name: string): void {
        this.searchNameStream.next(Name)
    }

    gotoDetail(hero: Hero): void {
        let link = ['/detail', hero.id];
        this.router.navigate(link);
    }

}

The problem is that, if i understand it correctly, subscribe takes three callback parameters .subscribe(success, failure, complete);. But in my case the complete part is never executed. I guess it has something to do with how switchMap works. Am i right?

Answer 1

The searchNameStream never completes, so the observable obtained from switchMap never completes either.

Every time an event is emitted by the searchNameStream, heroService.getHeroesByName() is called and all the events emitted by this "inner" observable are reemitted by the "outer" observable, until a new event is emitted by the searchNameStream, and this process repeats. You subscribed to the outer observable, which will only complete when the searchNameStream completes.