Provider with array not updating using ModalController created view

Ionic Framework ionic-v3
1

I don’t understand the following, and I hope someone is able to explain this to me.

I have a page with product overview (let’s call this page 1), and a product detailpage (let’s call it page 2 for now).
I also have a receiptprovider with a cart array but for my own reasons its called receipt and a method to add an item to the receipt:

Receipt provider:
Here I’m checking if the product already exists in the array, if so: +1 the the amount else push in the array.

public receipt: any = [];

constructor(...) {...}

addToReceipt = (product) => {
   if (this.receipt.filter(function (e) { return e.name == product.name; }).length > 0) {
       for (var i in this.receipt) {
           if (this.receipt[i].name == product.name) {
                this.receipt[i].amount++;
                break;
           }
        }
   } else {
       product.amount = 1;
       this.receipt.push(product);
   }
}

Page 2 - product detail page
This page has got a order button:

orderProduct = (productData) => {
   this.receiptProvider.addToReceipt(productData);
}

Now comes the part I do not understand. On my page 1 I have the following:

Page 1 - products overview

this.navCtrl.push(productDetailsModal);

If I use the navCtrl to push page 2, the order button works as expected. The product gets added to the shoppingcart, and the items in the cart are usable throughout the whole application. I can console.log this.receiptProvider.receipt on the overview page and it returns the shoppingcart including items.

However, when I use:

this.modalCtrl.create(productDetailsModal).present();

and using the same code this.receiptProvider.addToReceipt(productData); it just doesn’t add the product to the array. Well it does, but only within the modal. If I’m at page 2 I can console.log the receipt and it returns the item I added through the modal. But when I swith back to Page 1 and console.log the receipt again it returns an empty array.

And when I swith back to the navCtrl.push everything works again and the array is useable on the overview page. I just don’t understand how and why it won’t work if I use the modalcontroller to create and present the view.

It almost looks like it creates a seperate instance of the provider specially for the modal.

Has anyone encountered the same problem before and does anyone know a solution for this? I prefer using this page as a modal rather than pushing it using the navcontroller.

Kind regards

2

This makes me suspect you have a providers on one of your components somewhere.

1 Like
3

What I just don’t understand is, why does it work when I use the navcontroller to push the page but it doesn’t work when I use the modalcontroller.

By the way I have defined the provider in the app.module

providers: [ReceiptProvider, {provide: ErrorHandler, useClass: IonicErrorHandler }]

4

And you’re certain that’s the only place?

5

I do use another provider on the detailspage for soem other information. Does that also affect the detail provider? So that means I can’t have a providers: [] within the @component({ ... })?

6

“Can’t” is too strong, but when you do that, it means that you get a separate instance of every provider declared there in each component. Generally, not what is desired.

1 Like
7

Aha, makes sense. Thank you for explaining :slight_smile: