如何使用可观察过滤可观察对象
问题描述:
我有一个组件,用于显示来自可观察对象的控制面板列表。现在用户需要能够在这个列表中进行搜索,但由于体积小,我更喜欢做这个客户端。如何使用可观察过滤可观察对象
为了得到这个工作,我添加了三个观测到组件
@Input() dashboards: Observable<Dashboard[]>; // dashboards
term = new Subject<string>(); // search term
results: Observable<Dashboard[]>; // actual dashboard to display
要设置观察到的结果我用下面的代码。
ngOnInit(): void {
this.results = this
.term
.distinctUntilChanged()
.share()
.switchMap(term => {
return this.getDashboards(term);
})
.share();
}
private getDashboards(term) {
return this.dashboards
.map((dashboards: Dashboard[]) => {
return dashboards.filter(
this.getFilter(term)
);
});
}
private getFilter(term) {
term = term.toLowerCase();
return (dashboard: Dashboard) => {
// filter logic
};
}
在模板中,我有以下
<input
[disabled]="(dashboards | async)?.length < 1"
(keyup)="term.next($event.target.value)"
type="search"
>
<ul>
<li *ngFor="let dashboard of (results | async)">
{{dashboard.name}}
</li>
</ul>
在负载没有显示,但输入列表时,将显示,实际上被过滤。
所以我的问题是,这是要走还是走这条路,第二,如果这是正确的方式,我怎么能确保在加载数据显示?
答
因此,在我做了一些其他可观察的事情之后,我学到了一些可观察的新事物。
首先,我用默认的空字符串将该术语更改为BehaviorSubject
。这意味着总会有一个事件发出并可用。
term = new BehaviorSubject<string>(''); // search term
接下来是使用combineLatest
。那个可以用来使用第二个可观察对象。得到results
的代码随后变成如下所示;
this.results = this
.dashboards
.combineLatest(
this.term
)
.map((data) => {
return data[0].filter(this.getFilter(
data[1]
));
})
.share();
的getDashboards
方法可以被丢弃
为了确保数据显示,你应该将数据打印到控制台。 –
你是什么意思?我对仪表板和结果有一个简单的转储,并且在结果为空时仪表板显示数据的初始状态。直到我开始输入结果开始有信息 – MKroeders