角度數據綁定 - 服務中的數據更改

Question

希望有人能幫助我理解Angular中的這種行爲。

存在使用ngmodel雙向數據結合結合到組件變量一個簡單的輸入。組件初始化時，使用dataService檢索數據，該數據服務返回可正常工作的員工對象。但是，當我編輯輸入框中的值時，組件變量員工的名稱發生更改，而且服務中的數據也發生了改變，這對我來說非常奇怪。從服務返回的數據不應該受到影響嗎？在下面找到plunker。

請參閱本plunker https://plnkr.co/edit/wjuJLo?p=preview

getData() { 
    console.log(this.employee); 
    console.log(this.service.getEmp()); 
    } 

感謝和問候， 阿什利

Answer 1

問題在於這部分代碼。

ngOnInit() { 
     this.employee = this.service.getEmp(); 
     } 

在JavaScript中，變量只包含對象的引用，而不包含對象本身。因此this.employee必須this.service.getEmp();

的引用，因此只要更改this.employee，它會在參考更改值，因此你會從服務中獲得的價值將是一個更新的，而不是你所期望的一個。

中序克隆，

使用jQuery check this answer for more info：

// Shallow copy 
this.employee = jQuery.extend({}, this.service.getEmp()); 

// Deep copy 
this.employee = jQuery.extend(true, {}, this.service.getEmp()); 

或者使用Object.assign：

this.employee = Object.assign({}, this.service.getEmp());

或者使用Lodash：

this.employee = _.clone(this.service.getEmp()); 

Answer 2

要分配getEmp（）來this.employee意味着你分配getEmp() reference to this.empoyee所以如果你改變什麼this.employee那麼這也會反映到getEmp（）。

在這裏，你必須確保你將make a copy of getEmp()分配給this.employee之前。這將解決您的問題。

解決方案的代碼附加以下

export class App implements OnInit { 
    private employee: Employee = new Employee(); 
    constructor(private service: dataService) { 

    } 

    ngOnInit() { 
    this.employee = Object.assign({}, this.service.getEmp()); // making copy of getEmp() 
    } 

    getData() { 
    console.log(this.employee); 
    console.log(this.service.getEmp()); 
    } 
} 

乾杯！