我有一个服务,可以进行http调用并以Observable的形式返回数据,我将其分配给组件中的变量,如下所示:
this.usersResponse$ = this.dataSvc.getUsers(pageNumber);
在html上,我正在执行以下操作
<div *ngIf="usersResponse$ | async as userResponse; else loading">
<ng-container>
<ul>
<li *ngFor="let user of userResponse.data" (click)="detail(user.id)">
<img [src]="user.avatar" alt="">
<p>{{ user.first_name }} {{ user.last_name }}</p>
</li>
</ul>
</ng-container>
</div>
<ng-template #loading>
<app-loading></app-loading>
</ng-template>
我想要实现的是如何在http调用之前获取一个精细的控件以显示加载器,然后使http调用获取数据并关闭加载器,从而使UI变得跳跃。
感谢您的帮助。
答案 0 :(得分:0)
使用完成事件:
this.showLoader=true;
this.usersResponse$ = this.dataSvc.getUsers(pageNumber);
this.usersResponse$.subscribe(null, null, () =>
this.showLoader=false);
在模板中
<app-loading *ngIf="showLoader"></app-loading>