时间戳

首页 > 解决方案 > 更新离子模式中的列表会更新原始列表 ionic 5

html - 更新离子模式中的列表会更新原始列表 ionic 5

问题描述

我有一个澄清，基本上我将一个列表从父页面传递到离子模式。在模态中，我将遍历一个列表。我基本上是在点击 ion-item 时修改对象的属性。

下面是模态中的html代码。

<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>

在 modal.component.ts

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

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

我正在使用 navParams 将列表从父页面获取到模态。当我单击 ion-item 时，我将调用 updateObj 方法，在该方法中我将对象的状态更新为 true。一切正常。但是当我更新模态中的对象时，发送到模态的原始列表也会更新。

谁能解释为什么更新模式中的列表会更新原始列表。是否使用 navParams 作为列表的引用？

在 Parent.component.ts

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

这就是我将列表从父屏幕传递给模式的方式。

标签： htmlangular9ionic5

解决方案

当您将 this.itemListData 传递给 modal 时，您正在传递对象的引用。如果您不想修改实际对象，可以传递一个新对象。尝试这个：

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

推荐阅读