等待响应时使用 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>

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