Problem passing data to PopoverController

Ionic Framework ionic-v3
1

Hey all, I’m stumped I’ve spent a to many hours trying to figure this one out.

I have a localstorage array which ngfor is looping through, each item has a click event to display a popover to enter more details, I want to pass the local item to the popover so I can than update the item onDismiss & before the user submits the form. I’ve tested it with a static array and it works fine but when ever I try and access the item data I can back undefined, I can’t figure it out :frowning: any help would be great!

this is my function to call to create the popover.

//Show service detail on item click
presentService(ServiceDetail,event, data) {
  let popover = this.popoverCtrl.create(ServiceSectionDetailPage, data, {cssClass: 'serviceItemDetail'});
   popover.present({
     ev: ServiceDetail
   });

 }

This is the item list that has the click and working data in it.

<ion-grid>
<ion-row *ngFor="let item of serviceList">
    <ion-col  (click)="presentService($event, item)">
      <div clear class="serviceItemLabel">
        <ion-icon  name="clipboard"></ion-icon>{{item.name}}
      </div>
    </ion-col>

    <ion-col width-10>
      <ion-checkbox checked="false" name="0"  [(ngModel)]="item.service[0]"></ion-checkbox>
    </ion-col>
    <ion-col width-10>
      <ion-checkbox checked="false" name="1" [(ngModel)]="item.service[1]"></ion-checkbox>
    </ion-col>
    <ion-col width-10>
      <ion-checkbox checked="false" name="2" [(ngModel)]="item.service[2]"></ion-checkbox>
    </ion-col>
    <ion-col width-10>
      <ion-checkbox checked="false" name="3" [(ngModel)]="item.service[3]"></ion-checkbox>
    </ion-col>
    <ion-col width-10>
      <ion-checkbox checked="false" name="4" [(ngModel)]="item.service[4]"></ion-checkbox>
    </ion-col>

</ion-row>
<button fab-bottom  round fab-right class="fab-footer" ><ion-icon name="done-all"></ion-icon></button>

</form>
2

in the clickhandler you pass 2 arguments and you receive three.

presentService(event, data) {
  let popover = this.popoverCtrl.create(ServiceSectionDetailPage, data, {cssClass: 'serviceItemDetail'});
   popover.present({
     ev: event
   });
 }

Does this work?

3

Good spot :metal:, but didn’t seem to fix anything.

4

what do you see when you log data?

5

Throwing the following

ORIGINAL EXCEPTION: TypeError: Cannot read property 'name' of undefined

It can’t find the data even though it’s getting passed & being used in the view before the popover is created.

6

Any luck on this? I am having the same issue. If I use navCtrl.push and push my data there, I am able to log it out, but not with the popover.

let popover = this.popoverCtrl.create(DocumentsPage, docs, css);
popover.present({
ev: event
});

7

I found the answer after some head banging. Whatever is passed into the second param of the create method (in my case docs) is available with this.navParams.data. Hope someone else finds this useful.

2 Likes
8

I would encourage calling get() on the navigation params over directly accessing data.

1 Like
9

Thanks for the tip, but I tried using get(), but kept getting undefined for some reason. That is what led me to just consoling this.navParams and seeing the data there, so that is what I went with. Based off my code above, this is exactly what I had
this.navParams.get(‘docs’).

Maybe I am missing something, but no luck with that. Also, you mind sharing why you prefer one over the other?

10

I figured out my mistake.

The above should be as an example.

let popover = this.popoverCtrl.create(DocumentsPage, {docs: docs}, css);
popover.present({
ev: event
});

now you can access docs by this.navParams.get(‘docs’).

Thanks for encouraging me to get it right.

11

I figure since somebody bothered to define get(), they probably wouldn’t be too concerned about changing the underlying implementation (using data), so get() would be less likely to break out from under me. There was also a vaguely similar issue with forms a while back. Using form.get('control') in a template worked, but directly accessing the controls property with index signature (form.controls['control']) would subtly break.

1 Like