gpt4 book ai didi

angular - 使用 ngIf 检查元素既已定义又具有非零长度

转载 作者:太空狗 更新时间:2023-10-29 18:30:11 27 4
gpt4 key购买 nike

在 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 检查合并到一个语句中。这似乎是一个问题,因为我们需要使用首先使用 as 关键字定义的值 users

类似于:

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

最佳答案

发行中#15481在 Angular GitHub 上,有人问了关于 as 语法的问题:

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

Dzmitry Shylovich给出的答案是:

Nope


Arlo White 建议在单个 ngIf 条件中压缩它的一种方法发行#16173 :如果列表为空,则将值映射到 null。该方法显示在 this stackblitz 中。 .

<ng-container *ngIf="users$ | async as users">
this.users$ = usersObservable.map(x => x.length > 0 ? x : null);

关于angular - 使用 ngIf 检查元素既已定义又具有非零长度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48114850/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com