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>

但是对于Observable数组，列表$ .length不起作用。

更新

似乎（列出$ | 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>

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

Answer 2

.ts-Files的解决方案：

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

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

Answer 4

虽然这个答案是正确的

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

请记住，如果您使用http客户端来呼叫后端（在大多数情况下，您会这样做），如果您拥有更多的列表，则会重复调用您的API。异步即可。这是因为每个|异步管道将为您的列表$ observable创建新订户。

Answer 5

这对我有用 -

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

我从httpClient async获取数据。

这里的所有其他选项对我来说都不起作用，令人失望。特别是性感（列表$ | async）管道。

巴沙..

Answer 6

这里的方法还有一个主要问题：通过反复使用模板中的异步管道，实际上可以启动单个Observable的许多订阅。

KAMRUL HASAN SHAHED具有上述正确的方法：使用异步管道一次，然后为可在子节点中利用的结果提供别名。

Answer 7

也可以缩短：

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

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

Answer 8

离子4

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

当我移除$符号时，它起作用了

如何检查Observable数组的长度

8 个答案: