Ionic 3：如何在视图文件中访问Storage获取的对象？

问题根源 #

这个问题我之前在项目里也碰到过，核心原因是异步操作的时序差：this.storage.get()是异步方法（返回Promise对象），当home.html模板首次渲染时，userDetails还没被异步请求回来的数据赋值，此时它还是undefined，直接访问userDetails.firstname自然会抛出"无法读取未定义的属性'firstname'"的错误——你控制台能打印出数据，是因为异步操作完成后才完成赋值，这个时机晚于模板的首次渲染。

实用解决方案 #

这里有几种简单高效的解决方式，按推荐程度排序：

1. 使用安全导航操作符（?.） #

这是最便捷的方案，直接在模板里通过?.访问属性，它会自动判断前面的对象是否存在，不存在时就停止链式访问，彻底避免报错：

{{userDetails?.firstname}}

如果要访问嵌套属性（比如extension_attributes.is_subscribed），也可以链式使用：

{{userDetails?.extension_attributes?.is_subscribed}}

2. 用*ngIf先判断对象是否存在 #

如果需要渲染一组关联属性，可以用*ngIf先确保userDetails存在后再渲染对应的DOM，既能避免报错，还能控制内容的显示时机：

<ng-container *ngIf="userDetails">
  <p>姓名：{{userDetails.firstname}} {{userDetails.lastname}}</p>
  <p>邮箱：{{userDetails.email}}</p>
  <p>是否订阅：{{userDetails?.extension_attributes?.is_subscribed ? '是' : '否'}}</p>
</ng-container>

3. 提前初始化userDetails对象 #

在home.ts里，先把userDetails初始化为一个空对象，这样模板渲染时对象本身是存在的，只是属性值为空，不会触发"未定义"的错误：

// home.ts
userDetails: any = {}; // 提前初始化空对象

ngOnInit() {
  this.storage.get('signUser').then(body => {
    this.userDetails = body;
  });
}

你也可以给初始对象设置默认值，比如userDetails = { firstname: '' };，让页面初始时显示空白而非报错。

内容的提问来源于stack exchange，提问作者deepak murthy