Angular中如何合并ngIf的异步赋值与长度校验逻辑？

当然可以合并这两个*ngIf判断啦！你之前尝试的写法不生效，核心原因是as关键字的优先级比逻辑运算符&&高，导致Angular解析时会先执行users$ | async as users，但这时候users还没完成赋值，后续的users.length > 0就会出问题。

这里有两种简洁靠谱的方案，都能满足你的需求：

方案一：利用Angular *ngIf的多条件语法（推荐） #

Angular的*ngIf支持用分号分隔赋值操作和额外判断条件，写法清晰且符合官方推荐：

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

• 第一部分users$ | async as users完成异步数据的订阅和变量赋值；
• 第二部分users?.length > 0通过可选链避免空指针（异步未完成/失败时users为null/undefined），同时判断列表是否非空；
• 只有当两个条件都满足时，<ul>才会被渲染，完美覆盖你要求的三种不展示场景。

方案二：用括号调整优先级 #

如果你更习惯逻辑运算符的写法，可以用括号包裹async管道的结果，确保先完成赋值再判断长度：

<ul *ngIf="(users$ | async) as users && users?.length > 0">
  <li *ngFor="let user of users">{{user.name}}</li>
</ul>

不过这种写法部分编辑器可能会报语法警告，可读性也不如方案一，所以更推荐第一种。

内容的提问来源于stack exchange，提问作者BlackHoleGalaxy