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]);
}

My Formular：

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

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

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

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

我看到的是我设置的变量如：employees - ＆gt; pagedItems - ＆gt;人 - ＆gt;雇员

但没有任何一条线可以引领另一个方向。所以Angular以某种方式独自做到这一点。

如果您可以解释它或只是发送解释它的教程，我会非常高兴。

编辑1：

@Input('employee') employee: Employee;

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

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

但是否则它不会起作用。

啊，如果我已经问过，如果你有一个提示如何在form-ShiftData（Separate Component）中设置displayDatacollect（Formular），我很乐意：D

Answer 1

如果我理解你的问题，这与Angular无关，而是与JS中的对象引用有关。

employee，employees和pagedItems 中的相同员工对象。

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

例如：

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

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

1 个答案: