Question

在Angular应用中，我们通过服务调用检索用户列表。如果用户列表为空，我们将在状态存储中存储一个空数组[]。

在组件中我们要显示用户列表。我们使用异步管道。如果异步调用未完成或失败，并且用户列表的长度为零，我们不希望显示用户列表。

此处是组件html代码：

<ng-container *ngIf="users$ | async as users">
  <ul *ngIf="users.length > 0">
    <li *ngFor="let user of users">{{user.name}}</li>
  </ul>
</ng-container>

有没有办法在一个语句中组合两个ngIf检查。这似乎是一个问题，因为我们需要首先使用users关键字定义值as。

类似的东西：

*ngIf="users$ | async as users && users.length > 0"不起作用。

Answer 1

在Angular GitHub上的问题#15481中，询问了as语法的问题：

我可以使用＆＃34;作为＆＃34;在ngIf语句中并将其属性作为条件 ngIf？

Dzmitry Shylovich给出的答案是：

都能跟得上

问题Arlo White中的#16173建议了在单ngIf条件下压缩它的一种方法：如果列表为空，则将值映射到null。该方法显示在 this stackblitz 。

中

<ng-container *ngIf="users$ | async as users">

this.users$ = usersObservable.map(x => x.length > 0 ? x : null);

使用ngIf定义了Check元素并且长度非零

1 个答案: