Hi, I’m start to use ionic2 on my project and I create on page calle “menus page” show list of food. Once use tap the list, it will pop modal that make user select special request on selected dish.
I pass data from “menus page” to modal and it show perfectly. After user select special request, I need to to clean up special request form (everything should unselected ) but I look like the data from modal update the data in “menus page” and when I open modal (the same dish), all of previous special request selected.
I don’t know why changing value on modal page will effect data in “menus page”.
Please tell me what I need to do.
This is my code in “menus page”
ionViewDidLoad(){
//check basket empty
var init = this.basketService.getBasket().then(basket=>{
if(!basket){
this.basket = [];
}
else{
this.basket = basket;
}
});
Promise.all([init]).then(()=> {
this.sampleMenus = [{category:{name:"เมนูข้าว"}, list: [ {id:1, code:'BASE100', name:'Sample Meal 1 | ชุดอาหาร 1', detail:'ชุดอาหารสุดคุ้มจาก Halalize™ ให้คุณเลือกระหว่างเนื้อสัตว์ชนิดต่างๆ และผัดสด', image:'assets/wireframe/food.jpg', price:{value:100, unit:'฿'}, choices:this.sampleChoices, addons:[], basket:{quantity:0}}] },
{category:{name:"ก๋วยเตี๋ยว"}, list: [{id:2, code:'BASE101', name:'Beef Noodle | ก๋วยเตี๋ยวเนื้อ', detail:'ก๋วยเตี๋ยวเนื้อสูตรลับเฉาะของทางร้าน', image:'assets/wireframe/noodle.jpg', price:{value:70, unit:'฿'}, choices:this.noodleChoices_2, addons:this.noodleAddons, basket:{quantity:0}}, {id:3, code:'BASE102', name:'Chicken Noodle | ก๋วยเตี๋ยวไก่', image:'assets/wireframe/food.jpg', price:{value:50, unit:'฿'}, choices:this.noodleChoices_1, addons:this.noodleAddons, basket:{ quantity:0 }}]},
{category:{name:"เมนูผัด"}, list: [{id:4, code:'BASE103', name:'ผัดเนื้อน้ำมันหอย', image:'assets/wireframe/food.jpg', price:{value:120, unit:'฿'}, choices:[], basket:{quantity:0}},{id:5, code:'BASE104', name:'ผัดเต้าหู้', image:'assets/wireframe/food.jpg', price:{value:80, unit:'฿'}, choices:[], basket:{quantity:0}}]}];
this.summarizeBasket();
});
}
selectMenu($e, group_index, list_index){
var selectedItem = this.sampleMenus[group_index].list[list_index];
//has choices - popup modal
if(selectedItem.choices.length>0){
this.openChoicesModal(selectedItem)
}
else{
this.addToBasket(this.sampleMenus[group_index].list[list_index]);
}
}
openChoicesModal(dish){
var params = { dish:dish };
// pass data to modal
var choicesModal = this.modalCtrl.create(MenusChoicesModalPage, params);
choicesModal.present();
choicesModal.onDidDismiss(() => {
//just call summarizeBasket function
this.summarizeBasket();
});
}
and this is modal page code
export class MenusChoicesModalPage {
//receive data from menus page
private dish: any = this.navParams.get('dish');
private choices: Array<any>;
.....
ionViewDidLoad() {
this.choices = this.dish.choices;
}
//close modal after add item to basket
closeModal() {
this.viewCtrl.dismiss();
}
....
my question is why this.choices in modal page change, this.sampleMenus in menus page alway change? How can I unlink it.
Thank you