Angular 需要将所有项目加载到可观察状态<；英雄[]>；在用户添加任何过滤器之前

如何更改Angular 2 Tour of Heroes搜索组件（），使其在init上显示所有项目（页面加载时显示所有英雄），并在提供筛选器时向服务发出新请求，将筛选结果放入Heroes变量

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

从'@angular/core'导入{Component，OnInit}；
从'@angular/Router'导入{Router}；
从“rxjs/Observable”导入{Observable}；
从'rxjs/Subject'导入{Subject}；
//可观测类扩展
导入“rxjs/add/observable/of”；
//可观测算子
导入“rxjs/add/operator/catch”；
导入'rxjs/add/operator/debounceTime'；
导入'rxjs/add/operator/distinctUntilChanged'；
从“./hero search.service”导入{HeroSearchService}；
从“/Hero”导入{Hero}；
@组成部分({
选择器：“英雄搜索”，
templateUrl:'./hero search.component.html'，
样式URL:['./hero search.component.css']，
提供者：[搜索服务]
})
导出类HeroSearchComponent实现OnInit{
英雄：可见；
private searchTerms=新主题（）；
建造师(
私人heroSearchService:heroSearchService，
专用路由器：路由器{}
//将搜索项推送到可观察的流中。
搜索（术语：字符串）：无效{
this.searchTerms.next（术语）；
}
ngOnInit（）：void{
this.heros=this.searchTerms
.debounceTime（300）//每次击键后等待300ms，然后再考虑术语
.distinctUntilChanged（）//如果下一个搜索词与上一个搜索词相同，则忽略
.switchMap（term=>term//每次术语更改时切换到新的可观察对象
//返回可观察的http搜索
？此.heroSearchService.search（术语）
//或者在没有搜索词的情况下可以观察到空英雄
：可观察到的（[]））
.catch（错误=>{
//TODO:添加实际错误处理
console.log（错误）；
（[]）的可观测收益率；
});
}
gotoDetail（英雄：英雄）：无效{
让link=['/detail'，hero.id]；
这个.路由器.导航（链接）；
}
}

当前是在提供搜索词后发送请求。

您好_

基本上，这是您可以进行更改以使其正常工作的主要地方：

.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 

.switchMap(
术语=>术语
？此.heroSearchService.search（术语）
：可观察到的（[]）//术语
? 此.heroSearchService.search（术语）
：this.heroService.getheros（））//{
console.log（错误）；
（[]）的可观测收益率；
});
//等待100毫秒，然后加载所有英雄。。。
设置超时（（）=>{
本搜索（“”）；
}, 100); 
} 

我尝试向此添加调用。搜索（“”）；内恩戈尼特（）

是的，我们需要这个来加载所有英雄，但是稍微延迟一下，否则什么也看不到

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

你好_

基本上，这是您可以进行更改以使其正常工作的主要地方：

.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 

.switchMap(
术语=>术语
？此.heroSearchService.search（术语）
：可观察到的（[]）//术语
? 此.heroSearchService.search（术语）
：this.heroService.getheros（））//{
console.log（错误）；
（[]）的可观测收益率；
});
//等待100毫秒，然后加载所有英雄。。。
设置超时（（）=>{
本搜索（“”）；
}, 100); 
} 

我尝试向此添加调用。搜索（“”）；内恩戈尼特（）

是的，我们需要这个来加载所有英雄，但是稍微延迟一下，否则什么也看不到

---

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

那么你想看到所有英雄而不是顶级英雄，我是正确的还是误解了你的问题？我不需要更改顶级英雄的行为，我只需要在默认情况下显示所有英雄的列表，当键入某个内容时，列表将被过滤。我尝试添加对

this.search（“”）的调用;

在

ngOnInit（）

内部，但似乎没有发生任何事情（服务未执行）。因此，您希望看到所有英雄而不是顶级英雄，我是否正确理解了这一点，或者我误解了您的问题？我不需要更改顶级英雄的行为，我只需要在默认情况下显示所有英雄的列表，并且在键入某些内容时，列表已被筛选。我尝试添加对

this.search（“”）的调用内部
ngOnInit（）
，但似乎没有发生任何事情（服务未执行）。感谢您的回答。但是我们不是有办法在不使用setTimeout的情况下调用
search（）
方法吗？对我来说，这似乎是一个计时问题，使用
setTimeout（）调用它似乎很好。我现在正在考虑的另一件事是实现
AfterViewInit
并调用
this.search（“”）
在
ngAfterViewInit（）内搜索（
），但这没有经过测试，您可以尝试并报告结果，这看起来是一个更“优雅”的解决方案。谢谢我应该明白它是有效的：）你很好：）工作完美：）谢谢你的回答。但是我们不是有办法在不使用setTimeout的情况下调用
search（）
方法吗？对我来说，这似乎是一个计时问题，使用
setTimeout（）调用它似乎很好。我现在正在考虑的另一件事是实现
AfterViewInit
并调用
this.search（“”）
在
ngAfterViewInit（）内搜索（
），但这没有经过测试，您可以尝试并报告结果，这看起来是一个更“优雅”的解决方案。谢谢我应该明白它是有效的：）你很好：）工作完美：）