Question

目标将表中的选定对象添加到对象数组中。

我有一个数据表，每行都有一个选择复选框。选中该复选框后，选定的行（对象）将传递给方法。

 <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在组件中：

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);
}

}

做出第一个选择时，它将毫无问题地添加到数组中。当进行第二次选择时，数组两次显示第二个对象 [{第二选择}，{第二选择}] 代替[{first selection}，{second selection}]

有什么想法吗？

Answer 1

您只能使用一个对象，您可以重复使用和修改该对象，然后再次将其压入数组。但是然后您在数组中有两次相同的对象。无论您是通过阵列的第一个插槽还是第二个插槽访问该对象，您对该对象所做的任何操作都将可见。

为避免这种情况，请确保创建一个新对象。复制内容时，可以在几个地方决定创建新对象。这只是可以更改代码的众多地方之一：

更改：

  this.trainingList.push({...this.currTrainSelect});

收件人：

this.canLogin$ = this.permissions$.pipe(pluck('canLogin'));

ArrayPush正在覆盖对象数组

1 个答案: