angular - 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 或 typescript 方面的经验非常有限。我实际上正在学习一个 udemy 类(class)。这是我第一次遇到“可选链接”，所以我可能忽略了一些明显的东西。

产生问题的代码相当简单

<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[] 但粗略的是试图解释某种加载动画。这就是为什么 users[] 有时不会从一开始就加载的原因。

感谢任何帮助。

Answer 1

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

这行 users?.length > 0 会抛出一个错误，因为 users 列表可以是未定义的，所以在严格模式下你不能将 undefined 与数字进行比较(如根据控制台中的错误消息)和安全运算符(operator)不足以消除该错误。

如果您知道用户列表不能未定义，您可以像这样使用明确的断言运算符!

users!.length > 0

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

!!users && users.length

您的条件也将像这样工作:

users?.length

通过不将它与数字进行比较，就不会抛出错误，现在该表达式涵盖了 null、undefined 和 0 值。