在我的 Angular 2 组件中,我有一个 Observable 数组
list$: Observable<any[]>;
在我的模板中我有
<div *ngIf="list$.length==0">No records found.</div>
<div *ngIf="list$.length>0">
<ul>
<li *ngFor="let item of list$ | async">item.name</li>
</ul>
</div>
但 list$.length 不适用于 Observable 数组。
Update:
看起来(列表$ | 异步)?.length给了我们长度,但下面的代码仍然不起作用:
<div>
Length: {{(list$ | async)?.length}}
<div *ngIf="(list$ | async)?.length>0">
<ul>
<li *ngFor="let item of (list$ | async)">
{{item.firstName}}
</li>
</ul>
</div>
</div>
任何人都可以指导我如何检查可观察数组的长度。
您可以使用| async
pipe:
<div *ngIf="(list$ | async)?.length==0">No records found.</div>
更新 - 2021-2-17
<ul *ngIf="(list$| async) as list; else loading">
<li *ngFor="let listItem of list">
{{ listItem.text }}
</li>
</ul>
<ng-template #loading>
<p>Shows when no data, waiting for Api</p>
<loading-component></loading-component>
</ng-template>
更新 - Angular 版本 6:
如果您正在加载 css Skeleton,则可以使用它。如果数组没有项目,它将显示 css 模板。如果有数据则填写ngFor
.
<ul *ngIf="(list$| async)?.length > 0; else loading">
<li *ngFor="let listItem of list$| async">
{{ listItem.text }}
</li>
</ul>
<ng-template #loading>
<p>Shows when no data, waiting for Api</p>
<loading-component></loading-component>
</ng-template>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)