ユーザーがフィルタを追加する前に、すべてのアイテムをObservable にロードする必要があります。

Question

Angular 2 Tour of Heroes検索コンポーネント（https://angular.io/generated/live-examples/toh-pt6/eplnkr.html）を変更すると、すべてのアイテムがinitに読み込まれますフィルタが提供されている場合、サービスに新しいリクエストを出し、フィルタ処理された結果をヒーロー変数に渡します。

import { Component, OnInit } from '@angular/core'; 
import { Router }   from '@angular/router'; 

import { Observable }  from 'rxjs/Observable'; 
import { Subject }   from 'rxjs/Subject'; 

// Observable class extensions 
import 'rxjs/add/observable/of'; 

// Observable operators 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged'; 

import { HeroSearchService } from './hero-search.service'; 
import { Hero } from './hero'; 

@Component({ 
    selector: 'hero-search', 
    templateUrl: './hero-search.component.html', 
    styleUrls: [ './hero-search.component.css' ], 
    providers: [HeroSearchService] 
}) 
export class HeroSearchComponent implements OnInit { 
    heroes: Observable<Hero[]>; 
    private searchTerms = new Subject<string>(); 

    constructor(
    private heroSearchService: HeroSearchService, 
    private router: Router) {} 

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

    ngOnInit(): void { 
    this.heroes = this.searchTerms 
     .debounceTime(300)  // wait 300ms after each keystroke before considering the term 
     .distinctUntilChanged() // ignore if next search term is same as previous 
     .switchMap(term => term // switch to new observable each time the term changes 
     // return the http search observable 
     ? this.heroSearchService.search(term) 
     // or the observable of empty heroes if there was no search term 
     : Observable.of<Hero[]>([])) 
     .catch(error => { 
     // TODO: add real error handling 
     console.log(error); 
     return Observable.of<Hero[]>([]); 
     }); 
    } 

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

現在、検索語を入力した後にリクエストが送信されます。

Answer 1

Hello_

は、基本的には、これはあなたがそれが仕事を得るために変更を行うことができます主な場所である：

.switchMap(
    term => term  
    ? this.heroSearchService.search(term) 
    : Observable.of<Hero[]>([])) // <----- HERE if term is empty string you want to return all Heroes instead of empty collection 

あなたはHeroServiceからhero.service.tsを注入することができ、これを達成するためにメソッドgetHeroes（）があり、すべてのヒーローが返されます。

だから今、私たちはこのように見えるように上記のコード部分を変更することができます。

// First don't forget to inject HeroService and don't forget to import it too 
constructor(
    private heroSearchService: HeroSearchService, 
    private heroService: HeroService, 
    private router: Router) {} 

// Then the ngOnInit() will look like this 
ngOnInit(): void { 
    this.heroes = this.searchTerms 
     .debounceTime(300)   
     .distinctUntilChanged() 
     .switchMap(term => term 
     ? this.heroSearchService.search(term) 
     : this.heroService.getHeroes()) // <--- HERE if term is empty return all heroes 
     .catch(error => { 
     console.log(error); 
     return Observable.of<Hero[]>([]); 
     }); 

     // Wait for 100 ms before loading all heroes ... 
     setTimeout(() => { 
     this.search(''); 
     }, 100); 
} 

だけでなく、これはあなたがアクションでそれを見ることができ、あなたの問題とHEREを解決します。

this.search（ ""）; inside ngOnInit（）

はい、すべてのヒーローを読み込むにはこれが必要ですが、何も表示されない場合は少し遅れてください。

すべてがクリアされている場合、私に教えてください:)