javascript - 来自 localstorage 的 {{array.value}} 不工作

Question

我目前正在使用 ionic 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);
  }

控制台日志确实显示数据已从本地 ionic 存储中正确获取。 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>

阅读更多关于安全导航运算符(operator)的信息 here .