Angular 2 Databinding 为什么以及如何工作

Question

来自德国的早安，

首先，我的代码就像一个魅力，我对 Angular 2 的出色学习曲线感到高兴。我比以往任何时候都更快地完成工作。

我的问题是我不明白为什么数据绑定有效。对于我所看到的，我没有得到任何可以解释的代码。希望有人能给我提示。

基本上我得到了 3 个变量：

employee: Employee[]; //For editing a single Employee
employees: Employees[]; //Collects all Employees (Received from PHP)
pagedItems: any[]; //Stores some of the Employees[] to page trough them in ngFor

创建列表：

<ng-template ngFor let-i="index" let-c="count" let-weeks [ngForOf]=" pagedItems">
<div (click)="showDialog($event, people)" *ngFor="let people of weeks; let i2 = index;">
...

pagedItems 由 employees.slice 定义

ShowDialog（=更改员工的公式）：

showDialog(event, people) {
    this.employee = people[0];
    //console.log(people[0]);
}

我的配方：

<p-dialog styleClass="boxSettings" header="Datenerfassung" [(visible)]="displayDatacollect">
    <form-ShiftData *ngIf="employee" [employee]="employee">

    </form-ShiftData>
</p-dialog>

在公式中，我将所有内容绑定到员工类。在提交时，我将数据保存在数据库中。

所以这基本上就是我所做的一切。我现在的问题是我不明白为什么，如果我在公式中更改员工类（即使在提交之前），员工类和 pagedItems 类也会发生变化。我的名单也是如此。

我看到的是我设置的变量如下：员工 -> pagedItems -> 人 -> 员工

但没有一条线可以引向另一个方向。所以不知何故 Angular 自己做这件事。

如果你能解释它或只是发送一个解释它的教程，我会很高兴。

编辑 1：

@Input('employee') employee: Employee;

这样我在公式组件中导入它，也不太清楚为什么我不在这里写：

@Input('employee') employee: Employee[];

但否则它将无法正常工作。

啊，如果我已经问过了，如果您有提示我如何在 form-ShiftData（单独的组件）中设置 displayDatacollect（Formular），我很乐意：D

Answer 1

如果我正确理解您的问题，这与 Angular 无关，而是与对象引用在 JS 中的工作方式有关。

employee、employees 和 pagedItems 中的 same 员工对象。

当您执行pagedItems = employees.slide(...) 之类的操作时，您会得到一个新数组，但该数组包含与雇员数组相同的对象。

例如：

var tab = [ obj1, obj2, obj3 ];
var slice = tab.slice(0, 1); //slice = [ obj1 ]
// obj1 is the same object as in tab. So if you modify slice[0], you modify tab[0]

编辑（在您发表评论后）：

如果要修改员工而不影响原始数组，则需要修改员工的副本。您可以使用Object.assign 来做到这一点：

var employeeCopy = Object.assign({}, employee)
// now you can modify your employeeCopy without affecting the original object
// note that if employee contains a refernce to another object, employeeCopy and employee will share the same reference

如果您需要执行数组的深拷贝，那么您必须自己完成，方法是创建原始数组中每个对象的副本。 你可以看看here