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

您好_

基本上这是你可以进行改变以使其发挥作用的主要地方：

.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

要实现此目的，您可以从 hero.service.ts 中注入 HeroService ，其中包含 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（“”）的调用;在ngOnInit（）
中

是的，我们需要这个加载所有英雄，但是给它一点延迟，否则没有任何显示。

如果一切都清楚，请告诉我。）

在用户添加任何过滤器之前，需要将所有项目加载到Observable <hero []>

1 个答案: