等待响应时使用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显示重新加载图标。当数据到达图标隐藏和显示数据时，或在响应为空时显示此消息？像this

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>

这可以帮助您显示加载程序，错误消息（如果存在）。希望这可以帮助。