Ionic page not passing data from transcript to HTML

Question

I am reading json data from an api via a provider and then listing the data successfully.

The code below is from my paper.html how I list and call a click function for each item:

<ion-item *ngFor="let paper of papers" (click)='loadPaper(paper)'>
    {{paper.paper.title}}
</ion-item>

The loadPaper() function, below, is implemented in paper.ts:

loadPaper(paper){
    console.log('A paper', paper);
    this.navCtrl.push(this.loadPaperPage, {paper:paper});
  }

At this point, console.log successfully shows the data content of one entry from the json. I also push the paper data to another page, loadPaperPage.

My problem is in load-paper.html: when I try to print data from the passed paper object, I get the following error:

Error: Uncaught (in promise): TypeError: Cannot read property 'paper' of undefined TypeError: Cannot read property 'paper' of undefined at Object.eval [as updateRenderer] (ng:///AppModule/LoadPaperPage.ngfactory.js:32:31) at Object.debugUpdateRenderer [as updateRenderer] (http://localhost:8100/build/vendor.js:15067:21) at checkAndUpdateView (http://localhost:8100/build/vendor.js:14181:14) at callViewAction (http://localhost:8100/build/vendor.js:14527:21) at execComponentViewsAction (http://localhost:8100/build/vendor.js:14459:13) at checkAndUpdateView (http://localhost:8100/build/vendor.js:14182:5) at callWithDebugContext (http://localhost:8100/build/vendor.js:15430:42) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:8100/build/vendor.js:14967:12) at ViewRef_.detectChanges (http://localhost:8100/build/vendor.js:11951:22) at NavControllerBase._viewAttachToDOM (http://localhost:8100/build/vendor.js:52404:40) at c (http://localhost:8100/build/polyfills.js:3:19752) at Object.reject (http://localhost:8100/build/polyfills.js:3:19174) at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:52167:16) at NavControllerBase._failed (http://localhost:8100/build/vendor.js:52160:14) at http://localhost:8100/build/vendor.js:52207:59 at t.invoke (http://localhost:8100/build/polyfills.js:3:14976) at Object.onInvoke (http://localhost:8100/build/vendor.js:5123:33) at t.invoke (http://localhost:8100/build/polyfills.js:3:14916) at r.run (http://localhost:8100/build/polyfills.js:3:10143) at http://localhost:8100/build/polyfills.js:3:20242

My paper object does not seem to exist and I'm not sure why exactly.

load-paper.html follows:

<ion-header>

  <ion-navbar>
    <ion-title>loadPaper</ion-title>
    TEST: {{paper.paper.title}}
  </ion-navbar>

</ion-header>


<ion-content padding>
</ion-content>

And, load-paper.ts:

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

/**
 * Generated class for the LoadPaperPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-load-paper',
  templateUrl: 'load-paper.html',
})
export class LoadPaperPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoadPaperPage');
  }

}

Could you please add the most relevant parts of the load-paper.html and load-paper.ts files? — sebaferreras
@sisko i will solve the problem. paper is a object and how many element of this object — Utpaul
@Utpaul: There are 6 objects in the json but onclick should only pass a single object — sisko

sebaferreras sebaferreras · Accepted Answer · 2018-03-28T08:33:37

The issue is that sending the parameter is not enough, you also need to get it in the page where you want to use it. So this should work:

@IonicPage()
@Component({
  selector: 'page-load-paper',
  templateUrl: 'load-paper.html',
})
export class LoadPaperPage {

  public paperParam: any; // Property to get the param

  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoadPaperPage');

    // Get the parameter sent and put it in the paperParam
    // property from this component so you can use it in the view
    this.paperParam = this.navParams.get('paper');
  }

}

And then in the view, use that new paperParam property:

<ion-header>    
  <ion-navbar>
    <ion-title>loadPaper</ion-title>        
  </ion-navbar>    
</ion-header>


<ion-content padding>

  <!-- Now you can use the paperParam property from the component -->
  TEST: {{ paperParam.paper.title }}

</ion-content>

Ionic page not passing data from transcript to HTML

1 Answers