错误：未捕获（在承诺中）：TypeError：无法读取未定义

Question

html文件

<ion-header>
  <ion-toolbar color="danger">
    <ion-buttons>
      <button ion-button navPop icon-only>
        <ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
      </button>
    </ion-buttons>
      <ion-title text-wrap>志愿者评选</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <h1>{{volunteer.title}}</h1><br/>
</ion-content>

ts档

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


@Component({
  selector: 'page-volunteer-vote-detail',
  templateUrl: 'volunteer-vote-detail.html',
})

export class VolunteerVoteDetailPage {
  volunteer:any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.volunteer = navParams.get('volunteer');
  }

}

在其他页面中，我使用this.volunteer = navParams.get('volunteer');获取数据，但此处无法获取数据并显示错误

错误：

  

错误错误：未捕获（在承诺中）：TypeError：无法读取属性   未定义TypeError的'title'：无法读取属性'title'   未定义       at Object.eval [as updateRenderer]（VM3975 VolunteerVoteDetailPage.ngfactory.js：64）       at Object.debugUpdateRenderer [as updateRenderer]（VM3846 vendor.js：14729）       在checkAndUpdateView（VM3846 vendor.js：13865）       在callViewAction（VM3846 vendor.js：14210）       在execComponentViewsAction（VM3846 vendor.js：14142）       在checkAndUpdateView（VM3846 vendor.js：13866）       at callWithDebugContext（VM3846 vendor.js：15092）       at Object.debugCheckAndUpdateView [as checkAndUpdateView]（VM3846 vendor.js：14629）       在ViewRef_.detectChanges（VM3846 vendor.js：11652）       在Tab.NavControllerBase。 viewAttachToDOM（VM3846 vendor.js：49817）       at Object.eval [as updateRenderer]（VM3975 VolunteerVoteDetailPage.ngfactory.js：64）       at Object.debugUpdateRenderer [as updateRenderer]（VM3846 vendor.js：14729）       在checkAndUpdateView（VM3846 vendor.js：13865）       在callViewAction（VM3846 vendor.js：14210）       在execComponentViewsAction（VM3846 vendor.js：14142）       在checkAndUpdateView（VM3846 vendor.js：13866）       at callWithDebugContext（VM3846 vendor.js：15092）       at Object.debugCheckAndUpdateView [as checkAndUpdateView]（VM3846 vendor.js：14629）       在ViewRef .detectChanges（VM3846 vendor.js：11652）       在Tab.NavControllerBase._viewAttachToDOM（VM3846 vendor.js：49817）       at c（VM3844 polyfills.js：3）       在Object.reject（VM3844 polyfills.js：3）       在Tab.NavControllerBase._fireError（VM3846 vendor.js：49580）       在Tab.NavControllerBase._failed（VM3846 vendor.js：49573）       在VM3846 vendor.js：49620       at t.invoke（VM3844 polyfills.js：3）       at Object.onInvoke（VM3846 vendor.js：4979）       at t.invoke（VM3844 polyfills.js：3）       在r.run（VM3844 polyfills.js：3）       在VM3844 polyfills.js：3

编辑：

更新：

ts档

goToVolunteerVoteDetail(volunteerItem:any) {
    this.navCtrl.push(VolunteerVoteDetailPage,{
      volunteer:volunteerItem
    });
  }

html文件

(click)="goToVolunteerVoteDetail(volunteer)"

Answer 1

来自评论：

  

console.log(this.volunteer)时，你收到了什么吗？

     

可以获取我的数据

由于您在使用console.log时获取数据，因此当Angular尝试创建视图时，似乎与数据无关。为了避免此错误，您可以使用 elvis运算符，如下所示：

<h1>{{volunteer?.title}}</h1><br/>

如果title未定义，这将阻止Angular尝试读取volunteer属性。

Answer 2

变量志愿者似乎未定义。这是由于行中的错误：

this.volunteer = navParams.get('volunteer');

显然你没有发送一个名为志愿者的参数。因此navParams是空的。 我的建议是去你正在推送（或路由）的页面，并使用 navcontroller ：

this.navCtrl.push(VolunteerVoteDetailPage, {
      volunteer: "yourDATA"
    });