来自localstorage的{{array.value}}无效

Question

我目前正在使用离子2构建一个简单的电子邮件表单。因此，有一个表单，您将填写所有主题，消息和字体。在填写表格后，我把它放在@ ionic / storage作为对象。您可以在下图中看到它：

现在，在下一页上，我尝试使用以下代码获取项目数据：

import { Component } from '@angular/core';
import { NavParams, NavController, LoadingController } from 'ionic-angular';

import { Storage } from '@ionic/storage';


@Component({
  selector: 'preview-email-page',
  templateUrl: 'preview-email.html',
})
export class PreviewEmailPage {
  loading: any;
  personalizeData: any[];

  constructor(
    public nav: NavController,
    public navParams: NavParams,
    public localStorage: Storage,
  ) {
    this.localStorage.get('personalizeData').then((value) => {
      this.personalizeData = value;
    })
  }

  ionViewWillEnter(){
    console.log(this.ecardData);
  }

控制台日志确实显示从本地离子存储中正确获取数据。 console.log输出：

当我想在html页面中显示值时会出现问题：

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      <span>Personalize {{personalizeData.subject}}</span>
    </ion-title>
  </ion-navbar>
</ion-header>

使用控制台日志中的以下警告无法访问html页面：

EXCEPTION: Error in ./PreviewEmailPage class PreviewEmailPage - inline template:6:12 caused by: Cannot read property 'subject' of undefined

有谁能帮我找到错误的原因？非常感谢您的帮助。谢谢

Answer 1

因为personalizeData未在模板渲染时定义，所以使用安全导航操作符（?）来避免此错误：

<span>Personalize {{personalizeData?.subject}}</span>

详细了解安全导航操作员here。