我需要帮助。 我是Angular的新手,并且正在使用Angular 7最新版本。
所以我的HTML代码:
<input type="text" class="form-control" (input)="onSearchChange($event.target.value)" placeholder="Search serial...">
我的component.ts
onSearchChange(searchValue: string) {
//alert(searchValue);
console.log(searchValue);
this.filteredItems = this.listaTest; //uno un array di appoggio per la ricerca real-time
this.filteredItems.subscribe(
(response) => {
console.log(response);
this.filteredItems = response.filter(x => x.seriale.startsWith(searchValue));
});
}
我的<ul>
列表:
<ul class="list-group" style="width:80%; margin:0 auto; font-weight: bold; margin-top: 2%;">
<li *ngFor="let item of filteredItems | async" class="list-group-item">{{item.seriale}}
<button style="float:right;">{{item.seriale}}Download certificati</button>
</li>
</ul>
我的目标是在用户实时搜索时更新<ul>
列表。
所以我尝试了一个数组,而不是Observable,我只是推,删除并完成了。
但是,借助Observable,我如何实时更新列表?和过滤一样吗?
谢谢
答案 0 :(得分:0)
在ts文件中,您可以组合搜索流和列表流以获得结果流。
// a stream of search keyword
const search$ = new Subject();
const refineSearch$ = search$.pipe(
// you can filter out empty string if you want
filter(keyword => keyword !== ''),
// avoid to many work by debounceTime
debounceTime(500),
)
// here use of for demonstration
// if your list is changing over time
// its should be a list of stream
const list$ = of(aListOfItem);
const result$ = combineLatest(refineSearch$, list$)
.pipe(map(([keyword, list]) => getSearchResult(keyword, list)));
function getSearchResult(keyword, list) {
// implement your filter
// return an array
}
在模板中,输入事件将简单地为搜索流提供下一个值。
<input type="text" class="form-control" (input)="search$.next($event.target.value)" placeholder="Search serial...">
ul变化不大,只需将filteredItems替换为result $ stream
<ul class="list-group" style="width:80%; margin:0 auto; font-weight: bold; margin-top: 2%;">
<li *ngFor="let item of result$ | async" class="list-group-item">{{item.seriale}}
<button style="float:right;">{{item.seriale}}Download certificati</button>
</li>
</ul>