Trouble viewing List items in Ionic 4

@SooperFly wrote:

In one of my projects I’m attempting to create a list of items and once a user presses on an item, they will be navigated to a new page where the Item’s details will be shown. It’s very simple and straightforward, the Item’s name and it’s details are already written on the first page and I want them to be transferred to the next page. However I keep getting the error: Argument of type ‘{ item: any; }’ is not assignable to parameter of type 'NavigationOptions

here is my code as follows: This is the main page in where the list of all items will be shown

Html

<ion-list>
<ion-item *ngFor="let item of items" (click)="viewItem(item)"><ion-card>
<ion-card-header>
<ion-card-subtitle></ion-card-subtitle>
<ion-card-title>{{item.title}}</ion-card-title>
</ion-card-header>

<ion-card-content>
{{item.description}}
</ion-card-content>
</ion-card></ion-item>
</ion-list>

TS

export class ShoppingPage implements OnInit {
  public item;
  constructor( public navCtrl: NavController ) { }

  ngOnInit() {
  }
  ionViewWillEnter(){
  this.item = [
      {title: 'Product 1', description: 'This is where we would would put the description of "product 1"'},
      {title: 'Product 2', description: 'This is how the description of Product 2 would look'},
      {title: 'Product 3', description: "Product 3 is the greatest product you can buy off the market because it's perfect"}
    ];
  }
  viewItem(item){
    this.navCtrl.navigateForward('item-detail', {
      item: item
    });
  }

}

Now here is the code of the page in where I require all the data to be shown:

html

<ion-header>
  <ion-toolbar>
    <ion-title>{{title}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
{{description}}
</ion-content>

TS

export class ItemDetailPage implements OnInit {
  title;
  description;
  constructor(public navParams: NavParams) { }
  ionViewDidLoad(){
    this.title = this.navParams.get('item').title;
    this.description = this.navParams.get('item').description;
  }
  ngOnInit() {
  }

}

Thank you

EDIT: I am using ionic 4

Posts: 1

Participants: 1

Read full topic