在使用过滤器时,需要确保数据源是Observable对象。使用RxJS的pipe方法进行过滤。以下是一个示例:
在组件中:
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
template: `
- {{item}}
`
})
export class AppComponent {
items = ['apple', 'banana', 'cherry', 'orange'];
searchText = '';
get filteredItems$(): Observable {
return this.getItems().pipe(
map(items => {
if (!this.searchText) {
return items;
}
return items.filter(item =>
item.toLowerCase().includes(this.searchText.toLowerCase())
);
})
);
}
private getItems(): Observable {
return of(this.items);
}
}
在HTML模板中:
在这个例子中,当searchText
值变化时,filteredItems$
会更新。使用RxJS的map
运算符进行过滤,并使用异步管道将过滤结果返回到模板中。
上一篇:Angular过滤器路由历史元素