面试题：Angular插值表达式在动态数据显示中如何处理复杂对象属性

Question

假设在Angular项目中有一个复杂对象，包含多层嵌套属性，例如：`let user = { name: 'John', address: { city: 'New York', street: '123 Main St' } }`。请说明如何使用插值表达式在模板中显示`user.address.city`这个属性值，并解释在显示多层嵌套属性时可能遇到的问题及解决方法。

Answer 1

1. 使用插值表达式显示 user.address.city 属性值： 在Angular模板中，可以这样使用插值表达式：

<p>{{ user.address.city }}</p>

2. 可能遇到的问题：
   • 属性不存在问题：如果 user 对象或其嵌套的 address 属性不存在，会导致表达式求值失败，在模板中显示 undefined 或报错。例如，如果 user 为 undefined，那么 user.address.city 就会出错；或者 user 存在但 address 为 undefined 时，同样会出错。
   • 异步数据加载问题：如果 user 对象是通过异步操作获取的，在数据还未加载完成时，模板可能会尝试访问 user.address.city，此时 user 可能为 undefined，导致错误。
3. 解决方法：
   • 安全导航操作符（Elvis操作符）：可以使用安全导航操作符 ? 来防止属性不存在时出错。例如：

<p>{{ user?.address?.city }}</p>

这样，如果 user 或 address 为 undefined，表达式不会报错，而是显示空值。

• 异步数据处理：在获取异步数据时，可以先在组件中设置一个标志位来表示数据是否加载完成，在模板中通过 ngIf 指令确保数据加载完成后再显示相关内容。例如：

// 组件类
export class UserComponent {
  user: { name: string; address: { city: string; street: string } };
  isUserLoaded = false;

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService.getUser().subscribe((data) => {
      this.user = data;
      this.isUserLoaded = true;
    });
  }
}

<!-- 模板 -->
<div *ngIf="isUserLoaded">
  <p>{{ user.address.city }}</p>
</div>

这样可以避免在数据未加载完成时访问 user.address.city 导致的错误。