当在Angular中使用async
时,返回的是Observable,如果想要实现一个loading或者没有数据 的提示,我们需要知道返回数据的长度
可以使用 (users$ | async)?.length
的方式:
<div class="table-body">
<ng-container *ngIf="!isLoading && (users$ | async)?.length">
<ul>
<li *ngFor="let user of users" fxLayout="row" fxLayoutAlign="space-around center">
<span fxFlexOffset="-15" fxFlex="30">{{user.client_ip}}</span>
<span fxFlexOffset="-25">{{user.ip_province}}</span>
<span fxFlexOffset="-15">{{user.views}}</span>
</li>
</ul>
</ng-container>
<div *ngIf="!isLoading && (users$ | async)?.length === 0" class="f-cc">
暂无数据
</div>
<sim-spinner [loading]="isLoading"></sim-spinner>
</div>
参考: