在离子模态中更新列表会更新原始列表离子 5

Question

我有一个澄清，基本上我正在将列表从父页面传递到离子模态。在模态中，我将迭代一个列表。我基本上是在单击离子项时修改对象的属性。

下面是模态中的 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>

In modal.component.ts

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

updateObj(object){
if(object){
object.status = true
}
}

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

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

在 Parent.component.ts 中

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

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

Answer 1

当你把这个.itemListData传递给modal时，你传递的是对象的引用。 如果不想修改实际对象，可以传递一个新对象。 试试这个：

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