Problem with NavParams, it's undefined

Ionic Framework ionic-v3
1

So I am trying to pass data between two views, in my first view I am using this code in the first area to push the page:

    navToSubjectPage(subject) {

    console.log('Subject object: ', subject);

    this.nav.push(SubjectPage,  {
      subject: subject,
      message: "message"
    });

  }

and in the receiving view:

@Component({
  selector: 'page-subject',
  templateUrl: 'subject.html',
  providers: [DataImporter]
})
export class SubjectPage {

  static get parameters(){

    return [[DataImporter]];
  }

  subject : any;
  message : any;
  

  constructor(
    public dataService : DataImporter,
    private zone:         NgZone,
    public params:     NavParams,
    private nav:          NavController,
    public modalCtrl:     ModalController,
    public alertCtrl:     AlertController,
    private platform:     Platform

  ) {

    console.log("Constructor NavParams state: ", params );
  
    this.subject = this.params.get('subject');
    this.message = this.params.get('message');

    // this.dataService.getDocuments().then((result) => {
    //   this.items = result;
    // });
  }

However I’m only getting the error : error_handler.js:45 EXCEPTION: Error in ./SubjectPage class SubjectPage_Host - inline template:0:0 caused by: Cannot read property ‘get’ of undefined

NavParams is seen as undefined. Am I importing and declaring it incorrectly?

2

Try this:

let subject = this.params.data.subject;

3

@pe1 solution sounds good. however, if still not good, try to access navParams in ionViewWillEnter() instead of placing the getter in the constructor like

ionViewWillEnter() {
    this.subject = this.params.get('subject');
    this.message = this.params.get('message');
}
4

Tried both of those and they didn’t work. Strangely, when I changed the order of the parameters in my constructor it did work…

@Component({
  selector: 'page-subject',
  templateUrl: 'subject.html',
  providers: [DataImporter]
})
export class SubjectPage {

  static get parameters(){

    return [[DataImporter], [NavParams]];
  }

  items : any;
  subject : any;
  message : any;
  navParamData: any;

  constructor(
    public dataService : DataImporter,
    public params:     NavParams,
    private zone:         NgZone,
    private nav:          NavController,
    public modalCtrl:     ModalController,
    public alertCtrl:     AlertController,
    private platform:     Platform

  ) {

    console.log("Constructor NavParams state: ", params );

    this.subject = this.params.get('subject');
    this.message = this.params.get('message');

  }

I changed the NavParams to be the second parameter instead of the third and all of the sudden it was working. Strange… Does anyone have any idea why changing the order should have mattered?

5

Hi there,

I had a similar problem after upgrading from RC0 to RC3 today.

With RC0, I used ionViewDidLoad to get my param and it worked.
With RC3, I got the following error: undefined is not an object (evaluating ‘this.context.item.Kz’…), sidenote: param is a Model (Object).
Finally solved it by moving the param code (this.item = this.params.data.item) to the constructor.

My issue was, that the ionViewDidLoad was firing too late, the view tried to get properties from the item and therefore produced the error.

I dont know why…

1 Like
6

You are mixing JavaScript and TypeScript parameter idioms. Get rid of the parameters getter function.

1 Like
7

I’m having this same issue with RC3. Was working before (I think RC1) but now I can’t get the array passed into NavParams. I tried putting it in the constructor, onLoad, onEnter, and wrapping it in a promise in each and still no luck.