Question

我有一个组件，用于显示来自observable的仪表板列表。现在用户需要能够在此列表中进行搜索，但由于尺寸较小，我更喜欢这个客户端。

为了实现这个目的，我在组件中添加了三个observable

@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>

在加载时，没有显示任何内容，但在键入时会显示列表并实际过滤。

所以我的问题是，这是要走的路还是这样，第二，如果这是正确的方法我怎样才能确定在加载时显示数据？

Answer 1

因此，在我做了一些其他可观察的事情之后，我学到了一些可观察到的新事物。

首先，我使用默认的空字符串将术语更改为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方法

如何使用可观察的

1 个答案: