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课程。这是我第一次遇到"可选链接"，所以我可能忽略了一些显而易见的东西。

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

<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[] 从最开始就没有被加载。

感谢任何帮助。

- Ric Bocad

---

使用！代替？ - derstauner

附注：在Angular模板中，可选链接（'?. '）实际上被称为“安全导航运算符”，它们的工作方式并不完全相同。请参见Github上的此问题-> https://github.com/angular/angular/issues/34385 - Felix Lechenbauer

我正在使用 Angular 16，我弄不明白。已经尝试在很多地方使用问号和感叹号，但没有起作用。 - Agung Sudrajat

Answer 1

我认为你正在运行严格模式，这是很好的，但对于刚开始学习TS和Angular的人来说可能会让人感到不知所措。

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

如果您知道用户列表不可能未定义，可以使用明确断言操作符!，如下所示：

users!.length > 0

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

!!users && users.length

您的条件也将按以下方式工作：

users?.length

如果不将其与数字进行比较，则不会引发错误，现在该表达式包括空值、未定义值和 0 值。

- ionut-t

---

为什么在用户之前要使用双重!!？当您仅检查用户时，如果未定义，则不会通过。双重!!是因为严格模式吗？ - Vítor França

!! 运算符将用户列表转换为布尔值。因此，如果它未定义或为空，它将为假，否则为真。在严格模式下，这种方法似乎对我更有效（在某些情况下，如果我不这样使用它，会出现奇怪的错误）。但是，当然，您可以尝试仅使用否定。 - ionut-t

他已经在使用可选链 - 你可以用感叹号操作符来替换它，虽然类型上是一样的，但这只是一个不好的做法。 - pascalpuetz

一旦下班回家，我会尝试这个。我喜欢你解释了所有的区别。如果它有效，我会选择这个作为正确答案！ - Ric Bocad

Answer 2

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

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

- Guru Raghavendra

Answer 3

你所解释的错误是：users 是一个对象而不是数组。

数组可以通过 array.length 进行验证。

因此，思路如下：

1. 如果 users 是一个对象，可以使用以下方式进行验证：<ul *ngIf="loaded && users">

2. 如果 users 是一个数组，则必须在 controller.ts 中更改数据配置。

- Alejandro Roa