Angular 模板中的可选链接答案

【问题标题】：optional chaining in Angular TemplateAngular 模板中的可选链接
【发布时间】：2022-01-15 22:37:34
【问题描述】：

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

感谢任何帮助。

【问题讨论】：

使用！而不是 ?

标签： angular typescript optional-chaining

【解决方案1】：

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

users?.length > 0 此处的这一行会引发错误，因为用户列表可能未定义，因此在严格模式下，您无法将 undefined 与数字进行比较（根据控制台中的错误消息），并且安全运算符还不够摆脱那个错误。

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

users!.length > 0

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

!!users && users.length

您的情况也将像这样工作：

users?.length

通过不将其与数字进行比较，不会引发错误，现在该表达式涵盖了 null、未定义和 0 值。

【讨论】：

为什么要使用双倍！！在用户之前？当您仅检查用户时，如果未定义，您将不会通过。双！！也是因为严格模式？
！！运算符将用户列表评估为布尔值。因此，如果它未定义或为 null，则为 false，否则为 true。似乎这种方法在严格模式下对我来说效果更好（在某些情况下，当我没有像那样使用它时，我遇到了奇怪的错误）。但可以肯定的是，您可以尝试只使用否定。
他已经在使用可选链——你用 bang 操作符替换它，它的作用是一样的。至少在类型方面。这只是一种不好的做法。
下班回家后我会试试这个。我喜欢你解释了所有的差异。如果可行，我会选择这个作为正确答案！

【解决方案2】：

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

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

所以，这个想法是：

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

【讨论】：