Ionic 4 How to pass the data based on the item clicked to the next page?

Hi,

I have been stuck on this part for some time, hope you all will be able to help me :slight_smile:

I want to display the data of the item clicked to the Detail page.
I managed to get the ID of the item that I have clicked on the Main page. However, it could not display the data of the item to the Detail page.

This is the Detail page.

This is the .ts page where I get the ID of the item

This is the error I got when I click on the specified item

May I know what could be the problem?

Thank you for your help!

Your page is trying to render before wishlistDetail has been filled from your service, hence the error about a null value. You have two options to fix it:

  1. Wrap it in an ngIf
    <ion-card *ngIf="wishlistDetail">
    This way the card will only render once everything has been loaded.

  2. Mark it as optional

    {{(wishlistDetail | async)?.name}}
    If you use this approach, you’ll need to mark every possibly-null property as optional. Unless there are only one or two such properties, you’re better off wrapping in ngIf.

Thank you for your reply!

I tried to wrap it in an ngif, however it still shows the error message


Is it because it could not get the value of ‘name’?

It’s not that it can’t get the value of name, but that wishlistDetail isn’t loading, so it’s calling the name property on a null object.

What is displaying in the console.log for wishlistID and wishlistDetail?

The console.log for wishlistID is showing ‘1’ as I clicked on the first item.
The console.log for wishlistDetail is as shown below:

Thank you for your help!

Ok, it looks like you just need to unwrap your observable.

in your template:

<ion-card *ngIf="wishlistDetail">
<ion-card-title>
{{wishlistDetail.name}}

And in the component:

wishlistService.getWishListByID(wishlistID).subscribe((list) => {
this.wishlistDetail = list;
});