Typescript Angular 9更新对象数组中的对象
正如标题所说,我需要更新数组中的一个值Typescript Angular 9更新对象数组中的对象,typescript,angular9,Typescript,Angular9,正如标题所说,我需要更新数组中的一个值 <div *ngFor="let item of data; let i = index" > <div class="full-w" fxLayout='row' fxLayoutAlign='start center' fxLayoutGap='12px'> <span class="title">Color: </span> <span>{{item.color}}<
<div *ngFor="let item of data; let i = index" >
<div class="full-w" fxLayout='row' fxLayoutAlign='start center' fxLayoutGap='12px'>
<span class="title">Color: </span>
<span>{{item.color}}</span>
</div>
<mat-divider class="full-w"> </mat-divider>
<div *ngFor="let e of item.sizeQuantity; let j = index" fxLayout='row' fxLayoutAlign='space-between center'
fxLayoutGap='12px'>
<span class="title">Size: </span>
<span class="size">{{e.size}}</span>
<mat-form-field>
<input matInput type="number" placeholder="Quantity" [value]="e.quantity" #quantity />
</mat-form-field>
<button mat-button (click)="updateQuantity(quantity.value, item, i, j)">Add</button>
</div>
</div>
还是像这样
updateQuantity(value, item, ind, j) {
this.data.find(e => e.color == item.color).sizeQuantity[j].quantity = parseInt(value);
}
我错过什么了吗
//编辑:
数据是这样创建的:
let quantity = [];
let sizeQuantity = [];
this.selectedSizes.forEach(e => {
sizeQuantity.push({ size: e, quantity: 0 })
})
this.selectedColors.forEach(e => {
quantity.push({ color: e, sizeQuantity })
})
this.dialog.open(AddQuantityComponent, {
data: quantity
})
其中,根据用户选择动态创建大小和颜色数组:
this.selectedColors = ['black', 'beige', 'blue'];
this.selectedSizes = ['XS', 'S'];
quantity
值以每种颜色更新,因为它们共享相同的sizeQuantity
实例。问题的根源在于这种方法
this.selectedColors.forEach(e => {
quantity.push({ color: e, sizeQuantity })
})
此处必须从sizeQuantity
创建深度副本,这意味着可以使用以下内容:
this.selectedColors.forEach(e => {
let sq = JSON.parse(JSON.stringify(sizeQuantity));
quantity.push({ color: e, sizeQuantity: sq });
});
使用JSON序列化/反序列化来创建深度副本是很棘手的,但这是最简单、最向后兼容的方法。有关创建深度副本的更多详细信息,请查看。this.data如何在
add quantity.component.ts
中获取其初始值?我怀疑颜色的初始值在一个数组实例中,并且颜色包含对该实例的引用。当一种颜色的数量被更新时,原始数组被更新,因此所有颜色获得相同的数量值;谢谢你提供的信息。注入数据的来源看起来如何?我感兴趣的是在将默认显示的数据注入组件之前如何创建该数据。好的,请检查编辑并感谢谢谢,请参阅下面我的答案。在上面的代码段中,this.selectedSizes
和this.selectedColor
是相反的。我在回答中假设this.selectedsize=['XS','S']代码>和this.selectedColors=[“黑色”、“米色”、“蓝色”]因为sizeQuantity
的内容是基本类型(字符串)。你不需要一个深度克隆。使用数组扩展运算符或切片方法就足够了。
this.selectedColors.forEach(e => {
let sq = JSON.parse(JSON.stringify(sizeQuantity));
quantity.push({ color: e, sizeQuantity: sq });
});