при ожидании ответа покажите иконку перезагрузки с помощью Angular

Question

У меня есть этот код Typescript, который получает все данные из бэкэнда.

getalleventsserial() {
    this.activatedRoute.params.subscribe(
      params => {
        this.ns.eventsbyserial(params['id']).subscribe(
          notificcationserial => {
            this.notif = notificcationserial;
            this.isEmpty = (Array.isArray(this.notif)) ? true : false;
          }
        );
      }
    );
  }

и в этом HTML-коде я могу отображать данные или только сообщение.

<div style="text-align:center; color:#EE6E73;">
    <p *ngIf="isEmpty">Eventes for this product are: </p>
    <h5 *ngIf="!isEmpty">Events are empty!</h5>
  </div>
<div class="grid-container">
  <table *ngFor="let item of notif">
  <td>Date: {{item.dt}}</td>
  <td>Name: {{item.name}}</td>
  </table>
</div>

В этом кодеУ меня проблема: когда я получаю больше данных от службы на дисплее, покажите это <h5 *ngIf="!isEmpty">Events are empty!</h5> в течение некоторого времени, и, в конце, отобразите данные на экране.У вас есть идея, как решить эту проблему, или как ждать данных, в значке перезагрузки дисплея html.Когда данные поступают, значок скрывает и показывает данные или показывает это сообщение, когда ответ пуст?Как это

Answer 1

// *.component.ts
...
this.isLoading = true;
this.ns.eventsbyserial(params['id']).subscribe(
      notificcationserial => {
        this.notif = notificcationserial;
        this.isEmpty = (Array.isArray(this.notif)) ? true : false;
        this.isLoading = false;
      }
    );

//*.component.html
<ng-container *ngIf="isLoading">Loading... or your custom Loader</ng-container>

Это может помочь вам показать как загрузчик, так и сообщение об ошибке (если имеется). Надеюсь, это поможет.