Question

我有一个组件，它通过@Input（）“ contactInformation”包含数据。

我希望contactInformation的内容不能更改。因此，我创建了一个克隆，以便没有参考。

export class ContactInformationComponent implements OnIni {
  @Input() contactInformation: ContactInformationModel;

  public businessArray = [];

  constructor(){
  }

  ngOnInit() {
    this.businessArray = [...this.contactInformation.business];
  }

如果我通过输入字段更改数据，它也将更改为contactInformation。

<tr *ngFor="let item of businessArray; let i=index">
  <td>
   <div *ngIf="!isEditingInt"
        id="{{configParams[1].key}}">{{getLabeTOUCH_POINT_OPTIONS)}}</div>
   <div *ngIf="isEditingInt">
     <div class="d-inline-block">
        <input class="form-control"
         name="contact_name_{{i}}"
         [required]="configParams[2].required"
         [(ngModel)]="item.contactName">
     </div>
   </div>
  </td>
 </tr>
...

我希望只调整数组，因为不再需要对contactInformation的引用。

我在哪里犯错？

Answer 1

您的数组被克隆，数组中的对象未被克隆。如果它是浅对象，则可以执行以下操作：

ngOnInit() {
  this.businessArray = [...this.contactInformation.business].map((data) => ({ ...data }));
}

还有很多可以帮助您解决此问题的库

Angular2 +-克隆变量不会阻止对其进行更改

1 个答案: