угловой асинхронный перезарядный счетчик - PullRequest
Новая
       130

угловой асинхронный перезарядный счетчик

0 голосов
/ 18 февраля 2019

У меня есть простая настройка, чтобы показать загрузочный счетчик, когда асинхронная труба пуста: 

<div *ngIf="(searchResults$ | async) as searchResults; else loading">
</div>
<ng-template #loading>
    loading..
</ng-template>

Однако, когда пользователь выполняет поиск снова во второй раз, загрузка .. не отображается,Я полагаю, мне нужен этот searchResults $ observable, чтобы выдавать значение null, чтобы снова показать счетчик, или иметь отдельную переменную isLoading.

Каков наилучший способ сделать это?

, если это имеет значение, я 'у меня есть debounce и switchMap (то есть сложно с использованием finalize и т. д.) 

this.searchResults$ = this.filters$
      .pipe(
        debounceTime(200),
        distinctUntilChanged(),
        switchMap((f) => {
            return httpGet(f)
        })
      )

также, я попытался *ngIf="!isLoading && (searchResults$ | async) as searchResults, но нашел это проблематичным, например, searchResults $ не подписан, или подал жалобу на изменения после обнаружения изменений

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Вы можете попробовать установить переменную isLoading с помощью оператора tap следующим образом: 

this.searchResults$ = this.filters$
      .pipe(
        debounceTime(200),
        distinctUntilChanged(),
        tap(() => {this.isLoading = true}),
        switchMap((f) => {
            return httpGet(f)
        }),
        tap(() => {this.isLoading = false})
      );

Затем вы можете обойти angular, не подписываясь на свою наблюдаемую, разместив ее в другом * ngIf внутри нг-контейнер элемент. 

<ng-container *ngIf="(searchResults$ | async) as searchResults">
  <div *ngIf="!isLoading"></div>
</ng-container>
<ng-template *ngIf="isLoading">
    loading..
</ng-template>
0 голосов
/ 18 февраля 2019

Я столкнулся с той же проблемой и решил разграничить поток "Ask" и поток "result", объединив оба компонента для наблюдаемого результата компонента.Примерно так (на основе вашего кода): 

this.searchResults$ = merge(
      this.filters$.pipe(map(f => null)),
      this.filters$.pipe(
        debounceTime(200),
        distinctUntilChanged(),
        switchMap((f) => {
            return httpGet(f)
        })
      )
    );
...