Having trouble saving multiple items to an array and than pushing it to another page and displaying it

Ionic Framework ionic-v3
1

To keep it short I am creating a shopping cart like browser app. How its suppose to work:

  1. User selects a product, at which point they are brought to the cart page.
  • They can add the product to there cart, at which point they are redirected to the products page so they can add another product OR
  • They can click the checkout button and they are brought to a order confirmation page where they can view every item in their cart

Problem: The array of items is passed in the additem() method to the ConfirmOrder but it is not printing out

Edit: Here is the working code. Thank you @rapropos

in my cart.ts file (The saveItem() method gets called when user presses the add to cart button

public items = [];
// Both of these params which are to be saved in the array are passed from another page
prodName:   string    = this.navParams.get('prodName');
prodDesc:   string    = this.navParams.get('prodDesc');

saveItem() {

  let newItem = {
    prodName: this.prodName,
    prodDesc: this.prodDesc
  };

  this.addItem(newItem);
}

addItem(item) {

  this.items.push(item);

  this.navCtrl.push(ConfirmOrderPage, items: this.items);
}

ConfirmOrder.ts

export class ConfirmOrderPage {

  prodName;
  items = [];

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

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

    this.items = this.navParams.get('items');
  }
}

ConfirmOrder.html

<ion-list>
  <ion-item *ngFor="let item of items">{{item.prodName}}</ion-item>
</ion-list>
2

If item is naked there, there’s no way for the receiving end to know that it’s called ‘item’, so you need to do this:

this.navCtrl.push(ConfirmOrderPage, {item: item});
3

I actually noticed I was only passing a single item I wanted to pass the whole items array so I could print it out

I edited my OP to
this.navCtrl.push(ConfirmOrderPage, this.items);

So now it pushes the items object array and not just the single item. Will I still be able to pass the array the same way

this.navCtrl.push(ConfirmOrderPage, {items: items});

4

Yes, that same general strategy will work (although you will need {items: this.items}).

5

It worked! Thank you!

I will update the OP in case anybody needs help in the future.

6

I have the same issue the check out cant print the meltable items when send it the dashboard, what should I do?

Thanks,