我是基于
Hero-Search
来自《英雄之旅》教程。在那里你可以搜索英雄,返回一个
list
这只会显示包含字母的结果,让你点击你想要的英雄。
我想修改它,使我的当前
list
根据输入到搜索框中的内容进行过滤。
这是你在照片上看到的:
<h1><span id="monstersTitle">Monsters</span></h1>
<app-monster-search></app-monster-search>
<ul class="monsters">
<li *ngFor="let monster of monsters">
<span class="badge" (click)="addToEncounter(monster)">{{monster.name}}
</span> Hitpoints: {{monster.hitPoints}} Armor: {{monster.armor}}
</li>
</ul>
我尝试将其移动到应用程序monster search组件:
<div id="search-component">
<h4>Monster Search</h4>
<input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
<ul class="monsters">
<li *ngFor="let monster of monsters$ | async">">
<span class="badge" (click)="addToEncounter(monster)">{{monster.name}}
</span> Hitpoints: {{monster.hitPoints}} Armor: {{monster.armor}}
</li>
</ul>
export class MonsterSearchComponent implements OnInit {
monsters$: Observable<Monster[]>;
private searchTerms = new Subject<string>();
constructor(private monsterService: MonsterService, private sharedService:
SharedMonsterService) {}
// Push a search term into the observable stream.
search(term: string): void {
this.searchTerms.next(term);
}
getMonsters(): void{
this.monsterService.getMonsters()
.subscribe(monster => this.monsters$ = monster); //error on "this.monsters$" = Type 'Monster[]' is not assignable to type 'Observable<Monster[]>
}
addToEncounter(monster){
this.sharedService.publishMonster(monster);
}
这里的问题是这个。monsters$是可观察的类型,我需要一种可以订阅的怪物类型。还是有其他更简单的方法来实现这一点?
怪物服务:
public getMonsters(): Observable<Monster[]>{
return this.http.get<Monster[]>(this.monsterUrl).pipe(
tap(heroes => this.log(`fetched heroes`)),
catchError(this.handleError('getHeroes', []))
);
}
searchMonsters(term: string): Observable<Monster[]> {
if (!term.trim()) {
// if not search term, return empty hero array.
return of([]);
}
return this.http.get<Monster[]>(`${this.monsterUrl}/?name=${term}`).pipe(
tap(_ => this.log(`found monsters matching "${term}"`)),
catchError(this.handleError<Monster[]>('searchMonsters', []))
);
}
编辑:
作为将来的参考,如果其他人正在寻找类似的东西:
<div id="search-component">
<h4>Monster Search</h4>
<input #searchBox id="search-box" (keyup)="search(searchBox.value)"/>
<ul class="monsters">
<li *ngFor="let monster of (monsters$ | async)">
<span class="badge" (click)="addToEncounter(monster)">{{monster.name}}
</span> Hitpoints: {{monster.hitPoints}}
Armor: {{monster.armor}}
</li>
</ul>
</div>
<div *ngIf="!searchBox.value">
<ul class="monsters">
<li *ngFor="let monster of (monsters)">
<span class="badge" (click)="addToEncounter(monster)">{{monster.name}}
</span> Hitpoints: {{monster.hitPoints}}
Armor: {{monster.armor}}
</li>
</ul>
</div>