This question already has an answer here:
Error if don't check if {{object.field}} exists
                                
                                    (1个答案)
                                
                        
                                3年前关闭。
            
                    
我有一个DashboardComponent,它将向用户显示某些常规数据。这样的数据点之一就是我们拥有的用户数。

我还有一个UserService,其中有一个称为getUsers()的方法,该方法返回JSON映射的HTML响应。因此,在DashboardComponent中,我订阅了以下响应:

this._uService.getUsers()
               .subscribe(
                 users => this.users,
                 error => alert(error)
               )


所以现在我要做的就是在DOM中显示此数组的长度,例如

We have {{users.length}} users on board!


(或在DashboardComponent中创建一个名为companyCount的变量,并将其等同于users数组长度。)

这里的问题是,当我这样做时,它告诉我用户尚未定义。这是可以理解的,因为它是可观察的,并且当尝试访问它时,它并不存在。但是我不太确定该解决方案。

对我来说,奇怪的是,即使{{users.length}}(甚至{{users [0]}})给出错误,我仍然可以使用* ngFor #user of users,并很好地显示所有用户在桌子上,它不会给我一个错误。

我找到了解决方法,即使这不是我想要的。我从来没有真正得到过用户数组,而是这样做:

this._uService.getUsers()
               .subscribe(
                 users => this.userCount = user.length,
                 error => alert(error)
               )


然后在模板中

<div *ngIf="userCount">We have {{userCount}} users on board!!</div>


因此,在定义userCount之前,不会显示此div,这意味着订阅数据已可用。

这对我来说似乎不是一个很好的解决方案,特别是因为在仪表板上我最终将需要显示具有更复杂的计算,表格等的统计信息。

解决这个问题的一般方法是什么?

最佳答案

使用猫王或安全的导航操作员

{{users?.length}}


这样,仅当length时评估user!= null

09-21 00:07