在Angular 7中,你可以使用RxJS的filter
操作符来搜索和更新Observable数组。下面是一个示例代码:
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { filter } from 'rxjs/operators';
@Component({
selector: 'app-search',
template: `
- {{ item }}
`
})
export class SearchComponent {
items: string[] = ['apple', 'banana', 'cherry', 'date'];
filteredItems$: Observable;
searchTerm: string;
constructor() {
this.filteredItems$ = this.getItemsObservable();
}
getItemsObservable(): Observable {
return new Observable((observer) => {
observer.next(this.items);
observer.complete();
});
}
search(): void {
this.filteredItems$ = this.getItemsObservable().pipe(
filter((items: string[]) => {
return items.filter(item => item.includes(this.searchTerm));
})
);
}
}
在这个示例中,我们通过filteredItems$
属性来存储过滤后的Observable数组。初始时,我们将filteredItems$
设置为所有的items。当用户在输入框中输入搜索词并触发search()
方法时,我们会创建一个新的Observable,并使用filter
操作符过滤出匹配搜索词的items。然后,我们会将过滤后的Observable赋值给filteredItems$
,这将触发视图的更新,显示过滤后的结果。
上一篇:按照文本的情况进行排序。
下一篇:按照文本字段进行列表过滤