Angular Rx JS - Показывает загрузочный div, когда наблюдаемый обрабатывает - PullRequest
Новая
       2

Angular Rx JS - Показывает загрузочный div, когда наблюдаемый обрабатывает

0 голосов
/ 14 апреля 2020

Итак, у меня есть наблюдаемый массив items$.

. Я подписываюсь на наблюдаемое, используя | async трубу. 

<ng-template #loading>
    <div>
        Loading...
    </div>
</ng-template>
<div *ngIf="observable$ | async as items; else loading">...</div>

У меня есть выбор, и когда я выбираю опция, мой Subject.next () запускается, и наблюдаемая реагирует, чтобы дать мне новый набор данных для observable$.

Это замечательно и работает нормально, однако, есть небольшая задержка в получении поэтому вместо того, чтобы смотреть на экран, который обрабатывается в фоновом режиме, я хочу снова показать <ng-template>.

Это возможно? или есть альтернатива?

1 Ответ

0 голосов
/ 15 апреля 2020

Возможно, есть кое-что, чего я не понял, но это кажется довольно простым:

Файл компонента: 

  isLoading = false;
  subject = new Subject<string>();

  observable$ = this.subject.asObservable().pipe(
    delay(2000),
    tap(() => (this.isLoading = false))
  );

  startLoading() {
    this.isLoading = true;
    this.subject.next("Value " + Math.random() * 1000);
  }

И шаблон: 

<div *ngIf="isLoading">
  Loading...
</div>
<div>
  {{observable$ | async}}
</div>

Проверьте этот Stackblitz в зависимости от вашей проблемы: https://stackblitz.com/edit/angular-z1pkuj Извините, если я не понял вашу точку зрения. В этом случае вы можете опубликовать дополнительную информацию.

...