0

I have a clarification, Basically i am passing a list from parent page to Ionic modal. In modal, i will iterating over a list. i am basically modifying a property of an object on click of ion-item.

Below is the html code in the modal.

<ion-card *ngFor="let item of items">
    <ion-row>
      <ion-col size="3">
        <ion-img width="80" height="80" [src]="item.imagePath"></ion-img>
      </ion-col>
      <ion-col size="7" >
       <ion-label class="item-name">item.name</ion-label>
       <ion-label class="item-price">item.cost</ion-label>
       <ion-label class="item-date">item.date</ion-label>        
      </ion-col>
      <ion-col size="2">
       <ion-icon class="select-icon" name="add-circle" (click)="updateObj(item)"></ion-icon>
      </ion-col>
    </ion-row>
   </ion-card>

In modal.component.ts

  ngOnInit() {
    this.items = this.navParams.get("items");
  }

  dismissModal(){
    this.modalCtrl.dismiss();
  }
  
  updateObj(object){
     if(object){
      object.status = true
    }
  }

i am using navParams to get the list from parent page to the modal. When i click on ion-item i will be calling updateObj method where i am updating the status of object to true. Everything works fine. But when i update the object in the modal, the original list sent to the modal also gets updated.

Could anyone explain why updating the list in the modal updates the original list. Is it bcoz of using navParams as it referers to the list?

In Parent.component.ts

async openSearchModal(){
  const modal = await this.modalCtrl.create({
    component: CouponSearchPage,
    componentProps: { items: this.itemListData,
   }
  });

This is how i am passing the list to the modal from parent screen.

coder12346
  • 39
  • 2
  • 12

1 Answers1

0

When you pass this.itemListData to modal, you are passing the reference of the object. If you don't want to modify the actual object, you can pass a new object. Try this:

  const modal = await this.modalCtrl.create({
    component: CouponSearchPage,
    componentProps: { items: { ...this.itemListData},
   }
  });
Gunjan Kothari
  • 56
  • 2