等待响应时使用Angular显示重新加载图标

时间:2018-09-13 08:15:12

标签: angular typescript reload

我有这个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

1 个答案:

答案 0 :(得分:0)

// *.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>

这可以帮助您同时显示加载程序和错误消息(如果存在)。希望这会有所帮助。