如何检查可观测数组的长度

在我的角度2分量中，我有一个可观测的数组

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 在可观察数组的情况下不起作用。

更新:

看起来 (列表 $| 异步) ? . 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>

有人能告诉我怎么检查可观测数组的长度吗。

132315 次浏览
小开
最佳答案

你可以使用 | async管道:

<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>

最新情况-视角版本6:

如果你正在加载一个 css 骨架，你可以使用这个。如果数组没有项目，它将显示 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>
小开

. ts-Files 的解决方案:

     this.list.subscribe(result => {console.log(result.length)});
小开

虽然这个答案是正确的

<div *ngIf="(list$ | async)?.length === 0">No records found.</div>

请记住，如果您使用 http 客户端调用后端(在大多数情况下是这样做的) ，如果您有多个 列表 $| 异步，您将得到对 API 的重复调用。这是因为每个 | 异步管道将创建新的订阅者到您的列表 $Observer。

小开

对于角度4 + ，试试这个

<div *ngIf="list$ | async;let list">
Length: \{\{list.length}}
<div *ngIf="list.length>0">
<ul>
<li *ngFor="let item of list">
\{\{item.firstName}}
</li>
</ul>
</div>
</div>
小开

这对我很有效

*ngIf="!photos || photos?.length===0"

我正在从 httpClient 异步获取数据。

其他的选择对我都不起作用，这让我很失望。 特别是性感(list $| sync)管道。

巴萨。

小开

也可以缩写为:

<div *ngIf="!(list$ | async)?.length">No records found.</div>

用括号前的叹号。

小开

离子4

<div *ngIf="(items | async)?.length==0">No records found.</div>

我把 $标志拿掉的时候就成功了

小开

当我试图在 arr length 为空的情况下隐藏容器 div 时，Observable<Customer[]>(在构造函数中初始化)说“ object 可能是未定义的”时出现了这个问题 所以我把它设计成这样: <div *ngIf="(similarCustomers$ | async)?.length > 0">

我的同事通过这样做解决了这个问题:

<div *ngIf="(similarCustomers$ | async) as similarCustomers">
<ng-container *ngIf="similarCustomers.length > 0">

提交答案