如何检查 Observable 数组的长度

Question

在我的 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 数组。

更新：

似乎 (list$ | async)?.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>

任何人都可以指导我如何检查 Observable 数组的长度。

Answer 1

您可以使用 | 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>

更新 - Angular 版本 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>

Answer 2

.ts 文件的解决方案：

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

Answer 3

虽然这个答案是正确的

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

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

Answer 4

对于 Angular 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>

Answer 5

这对我有用 -

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

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

这里的所有其他选项都不适合我，这令人失望。特别是性感的 (list$ | async) 管道。

巴萨..

Answer 6

也可以缩短：

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

只需在括号前使用感叹号即可。

Answer 7

离子 4

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

当我删除 $ 标志时它起作用了

Answer 8

我遇到了这个问题 Observable<Customer[]>（在构造函数中初始化）在 arr 长度为空时尝试隐藏容器 div 时说“对象可能未定义” 所以我是这样的：<div *ngIf="(similarCustomers$ | async)?.length > 0">

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

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

如何检查 Observable 数组的长度

How to check the length of an Observable array

angular

observable

angular2-template

angular2-services