我有这个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
答案 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>
这可以帮助您同时显示加载程序和错误消息(如果存在)。希望这会有所帮助。