CODEWITHSUNDEEP
javascriptangulartypescriptionic-frameworkionic3
Yuyang He
Yuyang He

Reputation: 2272

Error: Uncaught (in promise): TypeError: Cannot read property 'title' of undefined

html file

<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 file

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');
  }

}

In other pages, I used this.volunteer = navParams.get('volunteer'); for get data, but here cannot get data and showing error for me

Error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'title' of undefined TypeError: Cannot read property 'title' of undefined at Object.eval [as updateRenderer] (VM3975 VolunteerVoteDetailPage.ngfactory.js:64) at Object.debugUpdateRenderer [as updateRenderer] (VM3846 vendor.js:14729) at checkAndUpdateView (VM3846 vendor.js:13865) at callViewAction (VM3846 vendor.js:14210) at execComponentViewsAction (VM3846 vendor.js:14142) at checkAndUpdateView (VM3846 vendor.js:13866) at callWithDebugContext (VM3846 vendor.js:15092) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (VM3846 vendor.js:14629) at ViewRef_.detectChanges (VM3846 vendor.js:11652) at 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) at checkAndUpdateView (VM3846 vendor.js:13865) at callViewAction (VM3846 vendor.js:14210) at execComponentViewsAction (VM3846 vendor.js:14142) at checkAndUpdateView (VM3846 vendor.js:13866) at callWithDebugContext (VM3846 vendor.js:15092) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (VM3846 vendor.js:14629) at ViewRef.detectChanges (VM3846 vendor.js:11652) at Tab.NavControllerBase._viewAttachToDOM (VM3846 vendor.js:49817) at c (VM3844 polyfills.js:3) at Object.reject (VM3844 polyfills.js:3) at Tab.NavControllerBase._fireError (VM3846 vendor.js:49580) at Tab.NavControllerBase._failed (VM3846 vendor.js:49573) at 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) at r.run (VM3844 polyfills.js:3) at VM3844 polyfills.js:3

Edit:

enter image description here

UPDATE:

ts file

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

html file

(click)="goToVolunteerVoteDetail(volunteer)"

Upvotes: 2

Views: 4106

Answers (2)

sebaferreras
sebaferreras

Reputation: 44669

From the comments:

Are you getting anything when console.log(this.volunteer)..?

Can get my data

Since you're getting the data when using the console.log, it seems to be related to the data not being ready when Angular tries to create the view. In order to avoid this error, you could use the elvis operator, like this:

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

This would prevent Angular from trying to read the title property if volunteer is undefined.

Upvotes: 2

Melchia
Melchia

Reputation: 24294

The variable volunteer seems to be undefined. This due to a mistake in the line :

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

Apparently you are not sending a parameter called volunteer. Therefore navParams is empty. My advise is to go wherever page you're pushing from (or routing) and use navcontroller like this:

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

Upvotes: 2

Related Questions