[英]ArrayPush is overwriting an array of objects
Goal add selected objects from table to an array of objects.目标将选定对象从表中添加到对象数组中。
I have a data table that has a select checkbox on each row.我有一个数据表,每行都有一个 select 复选框。 When the check box is checked the selected row(object) is passed to a method.
当复选框被选中时,选定的行(对象)被传递给一个方法。
<ng-container #cmsTable *cdkVirtualFor="let cms of cmsContent | searchFilter: searchText : count | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<tr style="width: 100%; min-height: 30px;">
<td style="word-wrap: break-word;max-width: 200px;">{{cms.buName}}
</td>
<td style="word-wrap: break-word;max-width: 200px;">{{cms.category}}
</td>
<td style="word-wrap: break-word;max-width: 200px;">
{{cms.contentTitle}}</td>
<td style="word-wrap: break-word;max-width: 200px;"><a
href="{{cms.contentURL}}" target="_blank">{{cms.contentURL}}</a>
</td>
<td style="word-wrap: break-word;max-width: 200px;"> {{cms.contentInfo}}
</td>
<td style="word-wrap: break-word;max-width: 200px;">{{cms.contentType}}
</td>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" (change)="addToSelectedList($event, cms)">
</div>
</td>
</tr>
</ng-container>
addToSelectedList in component:组件中的 addToSelectedList:
addToSelectedList(event: any, cmsObj: cms)
{
// CMS model is related to a DB in the backend
// Training Obj is a model that will just be passed to the api to send values in an email
// the values of the selected trainings will be passed to trainingobj and then added to the array of objects
if(event.target.checked)
{
this.cmsService.selectedContent = Object.assign({}, cmsObj);
this.selectedTrainings = this.cmsService.selectedContent;
this.cmsService.trainingObj.trainingID = this.selectedTrainings.ID;
this.cmsService.trainingObj.buName = this.selectedTrainings.buName;
this.cmsService.trainingObj.category = this.selectedTrainings.category;
this.cmsService.trainingObj.contentTitle = this.selectedTrainings.contentTitle;
this.currTrainSelect = this.cmsService.trainingObj;
//check if slection has been selcted already then unchecked then checked again.
let data = this.trainingList.some((item) => item.id === this.cmsService.trainingObj.trainingID);
if(data === false)
{
console.dir("selection can be added to array " + '\n' + '\n' +
" add selection :" + '\n' + JSON.stringify(this.currTrainSelect));
this.trainingList.push(this.currTrainSelect);
this.trainingsFinal = JSON.stringify(this.trainingList);
console.log('\n' + " ARRAY of trainings = : " + '\n' + this.trainingsFinal);
}
}
else
{
this.removeTraingSelected(this.currTrainSelect.trainingID);
}
} }
When a first selection is made it adds it to the array with no problems.当进行第一次选择时,它会毫无问题地将其添加到数组中。 When a second selection is made the array shows the second object two times [{second selection},{second selection}] instead of [{first selection},{second selection}]
当进行第二次选择时,数组显示第二次 object 两次 [{second selection},{second selection}] 而不是 [{first selection},{second selection}]
Any Ideas?有任何想法吗?
You only work with one object, which you reuse and modify and then push again in the array.您只使用一个object,您可以重复使用和修改它,然后再次推送到阵列中。 But then you have the same object in the array twice.
但是你在数组中有两次相同的 object。 Whatever you did with that object will be visible whether you access it via the array's first slot, or second slot.
无论您是通过阵列的第一个插槽还是第二个插槽访问它,您对 object 所做的任何事情都将是可见的。
To avoid this, make sure that you create a new object.为避免这种情况,请确保创建新的 object。 As you are copying things around, there are several places where you can decide to create a new object.
当您复制内容时,您可以决定在几个地方创建一个新的 object。 This is just one of the many places where you can change your code:
这只是您可以更改代码的众多地方之一:
Change:改变:
this.trainingList.push(this.currTrainSelect);
To:至:
this.trainingList.push({...this.currTrainSelect});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.