如何仅使用 ngmodel angular2 更改当前数组/对象的值

Question

我有一个数组和一个对象。在数组中，我从我的服务中获取一个列表，在对象中，我正在分配该数组的第一个元素。

feesEntries: Array<any> = [];
selectedFeesEntry: any;
clientList: Array<any> = [];

getData(data){
   this.feesEntries = JSON.parse(data['_body']);
   this.selectedFeesEntry = this.feesEntries[0];
}

On UI 显示 feesEntries 数组中的 table。我有一个 select 客户端的下拉菜单，对于我有 ClientList 和 ngModel 的选项，我使用它来将 select 绑定到 selectedFeesEntry。

样本：

<label class="control-label" for="select">Client Name</label>
    <div class="input-group">
        <select class="form-control" id="select" [(ngModel)]="selectedFeesEntry.client.name" name="selectedClientName" (change)="onClientNameChange(selectedFeesEntry.client.name)">
          <option *ngFor="let cl of clientList" [ngValue]="cl.name">{{cl.name}}</option>
        </select>
    </div>

现在的问题是，当我从选项中 select 访问客户端然后使用 ngmodel 时，只有 selectedFeesEntry 应该更新，但在我的情况下 feesEntries 也是更新。我不知道为什么会这样。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

据我了解，当从下拉列表中选择一个选项时，selectedFeesEntry 会发生变化，并且由于您已经像这样分配了 selectedFeesEntry，

this.selectedFeesEntry = this.feesEntries[0];

selectedFeesEntry 只是对 this.feesEntries[0] 的引用，换句话说，它是一个 浅拷贝

要执行深拷贝，

this.selectedFeesEntry = JSON.parse(JSON.stringify(this.feesEntries[0]));

这将创建一个新对象

Example: Shallow Copy

Example: Deep copy

希望对您有所帮助

如何仅使用 ngmodel angular2 更改当前数组/对象的值

How to change value of current array/ object only using ngmodel angular2

typescript

angular-ngmodel

angular