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

Question

In an Angular app we retrieve via a service call a list of users. If the user list is empty, we store in our state store an empty array [] .

In the component we want to display the user list. We use the async pipe. We don't want to display the user list if the async call is not completed or fails, and if the length of user list is zero.

Here is the component html code at the moment:

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

Is there any way to combine the two ngIf checks in one statement. It appears to be a problem since we need to use the value users defined firstly using as keyword.

Something like:

*ngIf="users$ | async as users && users.length > 0" doesn't work.

Answer 1

In issue #15481 on Angular GitHub, the question was asked about the as syntax:

Can I use "as" in ngIf statement and get its property as a condition to ngIf?

The answer given by Dzmitry Shylovich was:

Nope

---

One way of condensing it in a single ngIf condition was suggested by Arlo White in issue #16173 : mapping the value to null if the list is empty. That method is shown in this stackblitz .

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

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