面试题：Angular插值表达式与安全导航操作符在数据显示中的应用

Question

在Angular应用中，有时数据可能为null或undefined，使用插值表达式直接显示可能会导致错误。请说明安全导航操作符（?.)在插值表达式中的作用，并举例说明如何使用它来安全地显示可能为null或undefined对象的属性，比如在一个可能为空的用户对象中显示用户的地址信息（假设地址也是一个对象，包含city、street等属性）。

Answer 1

安全导航操作符（?.）在插值表达式中的作用

安全导航操作符（?.）用于在访问对象属性或调用对象方法时，先检查对象是否为 null 或 undefined。如果对象为 null 或 undefined，表达式不会抛出错误，而是返回 undefined。这避免了在对象可能为空的情况下直接访问属性或调用方法导致的运行时错误。

示例

假设在 Angular 组件中有一个可能为空的用户对象 user，并且 user 对象有一个 address 属性，address 也是一个对象，包含 city 和 street 等属性。可以这样使用安全导航操作符来安全地显示地址信息：

<ng-container *ngIf="user">
  <p>City: {{ user?.address?.city }}</p>
  <p>Street: {{ user?.address?.street }}</p>
</ng-container>

在上述代码中，使用 user?.address?.city 和 user?.address?.street 来确保只有当 user 对象和 user.address 对象都不为 null 或 undefined 时，才会访问 city 和 street 属性，从而避免潜在的错误。同时，使用 *ngIf="user" 额外增加了一层检查，当 user 为空时，内部插值表达式不会被计算，进一步提升安全性。