Angular-Observable和SwitchMap-如何在進行異步調用時顯示加載程序

Question

我正在從Angular文檔中檢查英雄之旅，以模仿“鍵入時搜索”行為。

您可以在此處找到示例

我想知道如何在等待搜索結果時顯示裝載程序。

我嘗試了這個：

this.results$ = this.searchTerms.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    tap(() => this.searching = true),
    switchMap((term: string) => {
        this.searching = false;
        return (term && term.length > 0) ? this.myService.someCallToApi(term) : new Observable<Contact[]>();
    })
);

但這是行不通的。

任何想法 ？

Answer 1

您需要在http請求后設置this.search = false

this.results$ = this.searchTerms.pipe(
    debounceTime(300),
    distinctUntilChanged(),
    tap(() => this.searching = true),
    switchMap((term: string) => {
        return (term && term.length > 0) ? this.myService.someCallToApi(term) : new Observable<Contact[]>();
    }),
    tap(() => this.searching =false),
);

Answer 2

在我看來，您在反跳之后正在“錄音”，這會導致searching布爾值立即從true變為false。 嘗試在反跳之前點按它，並在實際調用API 之后停止加載動畫：

this.results$ = this.searchTerms.pipe(
  tap(() => this.searching = true), // <= BEFORE DEBOUNCE
  debounceTime(300),
  distinctUntilChanged(),
  switchMap((term: string) => {
    return (term && term.length > 0) ? this.myService.someCallToApi(term) : new Observable<Contact[]>();
  }),
  tap(() => this.searching = false) // <- AFTER THE API CALL
);

這是根據SO的關於“搜索鍵入時 ”的問題（理解為從打字的開始 ）需要。

Answer 3

使用材料微調器https://material.angular.io/components/progress-spinner/overview您將在此處獲取文檔