Angular 模板中的可选链接

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.

这是我的错误。我一直在环顾四周，但运气不佳。我对 angular 或打字稿的经验非常有限。我实际上正在学习一个 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

所以，想法是：

如果 users 是一个对象，您可以使用以下方式进行验证：
- 如果users是一个数组，则必须更改controller.ts
  上的数据配置

Answer 3

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

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

Angular 模板中的可选链接

optional chaining in Angular Template

typescript

optional-chaining

angular