角度模板中的可选链接

Question

Compiled with problems:X
ERROR
src/app/components/users/users.component.html:2:22 - error TS2532: Object is possibly 'undefined'. 
2 <ul *ngIf="loaded && users?.length > 0">
~~~~~~~~~~~~~~~~~
src/app/components/users/users.component.ts:6:16
6   templateUrl: './users.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component UsersComponent.

这是我的错误。我一直在四处寻找，运气不太好。我对棱角分明或打字的经验非常有限。我实际上是在遵循一个udemy课程。这是我第一次遇到"；可选的链式"；所以我可能忽略了一些显而易见的东西。

产生问题的代码是相当简单的

<h2>Users</h2>
<ul *ngIf="loaded && users?.length > 0">
<li *ngFor="let user of users">
<h3>{{ user.firstName }} {{ user.lastName }}</h3>
<ul *ngIf="showExtended">
<li>age: {{ user.age }}</li>
<li>Address: {{ user.address.street }} {{ user.address.city }} {{ user.address.state }}</li>
</ul>
</li>
</ul>

component.ts只是提供了一个users[]，但粗糙的试图解释某种加载动画。这就是为什么用户[]有时不会从一开始就加载。

感谢您的帮助。

Answer 1

在我看来，你是在严格模式下运行的，这很好，但对于刚开始使用TS和Angular的人来说，这可能会让人不知所措。

这里的这一行users?.length > 0抛出了一个错误，因为用户列表可能是未定义的，所以在严格模式下，您无法将undefined与数字进行比较(根据控制台中的错误消息(，并且安全操作员不足以消除该错误。

如果你知道用户列表不能被定义，你可以像一样使用确定断言运算符!

users!.length > 0

但最好的选择是在比较长度之前检查您的列表是否未定义，您可以这样做：

!!users && users.length

你的情况也会这样：

users?.length

通过不将其与数字进行比较，就不会引发错误，现在该表达式包含null、undefined和0值。

Answer 2

您解释的错误是：用户是一个对象，而不是数组。

阵列可以使用：array.length 进行验证

所以，这个想法是：

1. 如果用户是一个对象，则可以使用以下项进行验证：<ul*ngIf＝"；加载&amp；用户">

2. 如果用户是一个阵列，则必须更改控制器上的数据配置。ts

Answer 3

一种方法是检查用户是否被定义为if条件的一部分

"loaded && users && users?.length > 0"