Question

我从JSON_VALUE获得了array的数据，并将其分配给两个数组。我将其中之一绑定到它上以查看API，并且当我取消选中复选框时，我需要从第二个数组中checkbox这个对象，但是它是从两个数组中拼接而成的

splice

Answer 1

请注意，数组是作为变量的引用“存储”的。

这意味着您写作

this.variantDetails = res.data ;
this.VariantToSend = res.data;

然后，您的两个局部变量都指向同一数组。结果，对其中一个进行更改将直接影响另一个。

例如，您可以使用点差运算符。

this.variantDetails = res.data ;
this.VariantToSend = [...res.data];

此解决方案将为第二个局部变量创建一个内容相同的新数组。但是请注意，“相同内容”应这样处理。如果原始数组包含对象或数组（因为这两个对象或数组都是按引用而不是按值存储的），则同样的问题会更深一层。这意味着，如果您要更改数组中某个对象的属性，则该对象的此属性也将在其他数组中更改。因为两者共享相同的参考。

一种不同的解决方案不是使用“ splice”（直接更改数组），而是使用“ slice”（如果可能），这将返回一个新数组并保持原始数组不变。

Answer 2

即使有两个数组，但是它们指向同一个引用，因此，每当您对一个数组进行更改时，它都会自动影响另一个数组。使用slice()会返回一个新数组，并保留原始数组。 / p>

     <div class="row varibles-box" >
    <div *ngFor="let variant of variantDetails">
        <mat-checkbox (change)="unCheckVariant(variant,$event)"  class="example-margin col-4" [checked]="true">
            {{variant.englishName}}
        </mat-checkbox>
    </div>
</div>

 this.addProductService.addCustomProducts(this.unitsForm.value).subscribe((res: any) => {
  this.variantDetails = res.data ;
  this.VariantToSend =  this.variantDetails.slice();
  this.dataSource = new MatTableDataSource(res.data);
  console.log(this.VariantToSend)
  console.log(this.variantDetails)
});

onCheckVariant(data, event) {
    if (!event.checked) {
        this.VariantToSend.splice(data, 1)
        console.log(this.variantDetails)
        console.log(this.VariantToSend)
    } else {
        this.VariantToSend.push(data)
    }
    this.dataSource = new MatTableDataSource(this.VariantToSend);
};

从数组拼接对象

2 个答案: