这是我目前显示搜索结果的最佳尝试。
我考虑过以某种方式扩展 Observable 以包含 isLoading 属性 - 或返回一个元组，但最终返回一对可观察对象的辅助函数（在我的服务中）似乎是最干净的方式。像你一样，我一直在寻找一些“魔法”，但我找不到比这更好的方法了。
所以在这个例子中，我有一个 FormGroup（一种标准的反应形式），其中包含搜索条件：
{ email: string, name: string }
我从表单的valueChanges observable 中获取搜索条件。
组件构造函数
注意：直到条件更改后，搜索才会真正运行，这就是为什么 this 在构造函数中。
// get debounced data from search UI
var customerSearchCriteria = this.searchForm.valueChanges.debounceTime(1000);
// create a pair of observables using a service (data + loading state)
this.customers = this.customersService.searchCustomers(customerSearchCriteria);
// this.customers.data => an observable containing the search results array
// this.customers.isLoading => an observable for whether the search is running or not
搜索服务
public searchCustomers(searchCriteria: Observable<CustomersSearch>):
{ data: Observable<CustomerSearchResult[]>,
isLoading: Observable<boolean> }
{
// Observable to track loading state
var isLoading$ = new BehaviorSubject(false);
// Every time the search criteria changes run the search
var results$ = searchCriteria
.distinctUntilChanged()
.switchMap(criteria =>
{
// update isLoading = true
isLoading$.next(true);
// run search
var search$ = this.client.search(new CustomersSearch(criteria)).shareReplay();
// when search complete set isLoading = false
search$.subscribe({ complete: () => isLoading$.next(false) });
return search$;
})
.shareReplay();
return { data: results$, isLoading: isLoading$ };
}
需要找到一些方法来使其通用，但这很容易。另请注意，如果您不关心 isLoading，您只需执行 searchCustomers(criteria).data，然后您就可以获取数据。
编辑：需要添加额外的 ShareReply 以防止搜索触发两次。
组件 HTML
像往常一样使用customers.data 和customers.isLoading 作为可观察对象。记住customers 只是一个带有两个可观察属性的对象。
<div *ngIf="customers.isLoading | async">Loading data...</div>
<ul *ngIf="!(customers.isLoading | async)">
<li *ngFor="let d of customers.data | async">{{ d.email }}</li>
</ul>
另外请注意，两个 observable 都需要 async 管道。我意识到 isLoading 看起来有点笨拙，我相信无论如何使用 observable 比使用属性更快。可以对此进行改进，但我还不是专家，但肯定会欢迎改进。