如何检查 Observable 数组的长度

Posted 2023-02-22

【中文标题】如何检查 Observable 数组的长度

【英文标题】：How to check the length of an Observable array

【发布时间】：2016-10-29 16:17:27

【问题描述】：

在我的 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>

谁能指导我。

【问题讨论】：

报告于github.com/angular/angular/issues/9641

您的方法还有另一个主要问题：通过在模板中反复利用异步管道，您实际上启动了对单个 Observable 的许多订阅。 KAMRUL HASAN SHAHED 采用上述正确方法：使用异步管道一次，然后为可以在子节点中利用的结果提供别名。

【参考方案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>

【讨论】：

我也试过了，但它给出了错误“TypeError: Cannot read property 'length' of null”

从您提供的信息中很难知道。试试<div *ngIf="(list$ | async)?.length==0">No records found.</div>（添加?）

我试过了，它有效 没有找到记录。

额外的? 是必需的，因为list$ 仅在 Angular2 尝试第一次渲染视图之后设置。 ? 阻止评估子表达式的其余部分，直到 ? 的左侧部分变为 != null（猫王或安全导航运算符）。

@GünterZöchbauer 在我看来，第一个 async 管道解析数据，因此我的下一个 async 管道循环不显示任何内容。或者 *ngIf 创建了一个额外的范围，因此它不起作用。很难说。但是，虽然我的循环包含在 if 中，但它不显示任何数据。如果它自己正确地评估为true。

【参考方案2】：

.ts 文件的解决方案：

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

【讨论】：

事后不用马上退订吗？

最好取消订阅 onDestroy 组件上的 observables

@ThPadelis 这取决于 observable 的生命周期...

【参考方案3】：

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

【参考方案4】：

虽然这个答案是正确的

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

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

【参考方案5】：

也可以缩短：

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

括号前加感叹号即可。

【参考方案6】：

这对我有用 -

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

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

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

巴萨..

【参考方案7】：

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

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

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

【参考方案8】：

离子 4

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

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

【讨论】：

$ 符号用于表示 Observable。它与工作/逻辑无关。它只是 Angular 中遵循的约定。