Return 如果没有给出搜索参数则所有结果

Question

我正在看 Deborah Kurata 的 the declarative RxJS approach to tour of heroes 。我想知道在以下情况下它会如何工作：

默认加载所有英雄
如果有搜索词，显示搜索结果

现在，这可能可以通过执行以下操作来实现：

英雄-search.component.ts:

  export class HeroSearchComponent {
  // DJK3 Assign to the declared Observable in the service
  heroes$ = this.heroService.filteredHeroes$;
  allHeroes$ = this.heroService.heroes$;

  searchActive = false;

  constructor(private heroService: HeroService) {}

  // Push a search term into the observable stream.
  search(term: string): void {
    this.heroService.search(term);
    this.searchActive = true;
  }
}

英雄-search.component.html:

<div id="search-component">
  <label for="search-box">Hero Search</label>
  <input #searchBox id="search-box" (input)="search(searchBox.value)" />

  <ng-container *ngIf="!searchActive; else searchResults">
    {{allHeroes$ |async | json}}
  </ng-container>


  <ng-template #searchResults>
    <ul class="search-result">
      <li *ngFor="let hero of heroes$ | async">
        <a routerLink="/detail/{{hero.id}}">
          {{hero.name}}
        </a>
      </li>
    </ul>
  </ng-template>

</div>

但这在我看来是错误的。有更好的方法吗？也许直接在服务中检查这个？

Answer 1

有多少英雄？

如果不是太多，那么我想 allHeroes$ 是由一个服务创建的，在内部，它类似于 this.httpClient.get(methodName, options).pipe(shareReplay(1))，然后在服务上有一个方法接受一个Observable<string> 并返回 combineLatest([this.allHeroes$, arg]).pipe(map(([heroes, searchTerm]) => !searchTerm ? of(heroes) : heroes.filter(insertFormulaHere)))（......至少在最初，但这可以在实现工作原型后进行优化。）

然后，组件将实例化一个监听搜索框变化的可观察对象，并将其传递给服务方法，将响应保存到组件的 heroes$ 属性.

Return 如果没有给出搜索参数则所有结果

Return all results if no search parameter is given

angular

rxjs

angular2-observables