Question

希望有人能帮助我理解Angular中的这种行为。

使用ngmodel双向数据绑定绑定到组件变量的简单输入。组件初始化时，使用dataService检索数据，dataService返回一个工作正常的员工对象。但问题是当我在输入框中编辑值时，组件变量employee的名称会发生变化，但是服务中的数据也会发生变化，根据我的说法非常奇怪。从服务返回的数据不应该受到影响吗？在下面找到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

你正在为this.employee分配getEmp（）意味着你要分配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()); } }。这将解决您的问题。

解决方案代码位于

下方

$(document).ready(function(){
 $('#checkbox').change(function() {
  if ($(this).is(':checked')) {
   $("body").css("background","red");
  } else {
    $("body").css("background","white");
  }
});
  
});

$(window).resize(function() {

    if ($(window).width() < 768) {
    	$('#checkbox').off();
        $($('.tFFiltre')).appendTo('.tFPopup');
    } else {
    $('#checkbox').off();
        $($('.tFFiltre')).appendTo('.backFilter');
    }
});

干杯！

角度数据绑定 - 服务中的数据也发生了变化

2 个答案: