ionic 3 输入数据绑定正在更新相同类型的不同数组

Question

我的一个 ionic 3 应用程序的输入数据绑定有问题。每当输入发生变化，即改变相同类型的不同数组的数组值时。

这是我的HTML

<ion-list>
    <ion-item-sliding *ngFor="let item of storageItem ; index as i">
        <div class ="itemList">

            <input type="number" [value] ="item.storageOrderQuantity"  (blur)="updateInputItemValue(item)"
                             [(ngModel)]="item.storageOrderQuantity" />

        </div>
    </ion-item-sliding>
</ion-list>

当输入值发生变化时，它会更新 'storageItem' 数组以及具有相同对象的其他数组（还有一些其他数组 'item'）。

这是我的数组声明。项目是一个模型 class.

item: Item[];
storageItem: Item[] = [];

storageItem' 是 'item

的子集

谁能告诉我在数据竞价中会出现什么错误？

Answer 1

您提到 storageItem 是 item

的子集

你可能已经知道了，数组和对象使用了assign-by-reference的概念。如果您不知道这一点，请阅读下面关于 Medium 的文章。

https://medium.com/@naveenkarippai/learning-how-references-work-in-javascript-a066a4e15600

因此，如果您在两个数组中都有相同的对象，那么更新一个数组将更新另一个数组，

const obj = { name : 'value' };
const arr1 = [1,2,3,obj];
const arr2 = [4,5,6,obj];

obj.name = 'yash'; // both arrays will have updated object

现在如果你想避免这种情况，那么你可以在另一个数组中使用它之前创建一个对象的副本。

参考自https://flaviocopes.com/how-to-clone-javascript-object/

item: Item[] = [
    { id : 'item1', list : [] }, 
    { id : 'item2', list : [] }, 
    { id : 'storageItem', list : [...storageItem] }
];
storageItem: Item[] = [list of storage items];

现在storageItem和item > id='storageItem'指向不同的数组。所以您的模板现在只会更新 storageItem。

ionic 3 输入数据绑定正在更新相同类型的不同数组

ionic 3 input data binding is updating the different arrays of same type

ionic-framework

ionic3