Return 如果没有给出搜索参数则所有结果
Return all results if no search parameter is given
我正在看 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>
但这在我看来是错误的。有更好的方法吗?也许直接在服务中检查这个?
有多少英雄?
如果不是太多,那么我想 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$
属性.
我正在看 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>
但这在我看来是错误的。有更好的方法吗?也许直接在服务中检查这个?
有多少英雄?
如果不是太多,那么我想 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$
属性.