7

angular 2チュートリアルでヒーローアプリをいじっていますが、現在、このコンポーネントがあります

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);
    }

}

問題は、私が正しく理解している場合、subscribe が 3 つのコールバック パラメータを受け取ること.subscribe(success, failure, complete);です。しかし、私の場合、完全な部分が実行されることはありません。switchMap の仕組みと関係があると思います。私は正しいですか？

4

1 に答える 1

8

はsearchNameStream決して完了しないため、から取得したオブザーバブルswitchMapも決して完了しません。

によってイベントが発行されるたびにsearchNameStream、heroService.getHeroesByName()が呼び出され、この「内側」のオブザーバブルによって発行されたすべてのイベントが、 によって新しいイベントが発行されるまで、「外側」のオブザーバブルによって再発行され、searchNameStreamこのプロセスが繰り返されます。が完了したときにのみ完了する外側のオブザーバブルをサブスクライブしましたsearchNameStream。

于 2016-08-31T17:31:45.943 に答える