我有一个简单的设置,当异步管道为空时显示加载小图标:
<div *ngIf="(searchResults$ | async) as searchResults; else loading">
</div>
<ng-template #loading>
loading..
</ng-template>
然而,当用户第二次搜索时,加载中的提示不会显示。我认为需要让searchResults$可观察对象再次发出null来重新显示旋转图标,或者使用一个单独的isLoading变量。有什么最好的方法吗?如果有影响的话,我使用了防抖和switchMap(即使用finalize等操作比较棘手)。
this.searchResults$ = this.filters$
.pipe(
debounceTime(200),
distinctUntilChanged(),
switchMap((f) => {
return httpGet(f)
})
)
此外,我尝试过*ngIf="!isLoading && (searchResults$ | async) as searchResults
,但发现存在问题,例如未订阅searchResults$,或Angular在变更检测后抱怨变更。