Angular 2 数据绑定为什么以及如何工作

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>

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

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

我看到的是我将变量设置为：employees -> pagedItems -> people -> employee

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

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

编辑 1：

@Input('employee') employee: Employee;

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

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

但否则它不会工作。

啊，如果我已经问了，如果你有提示我如何在 form-ShiftData（单独组件）内部设置 displayDatacollect（公式），我很乐意 :D

Answer 1

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

在employee、employees 和 pagedItems.

中是相同的 employee 对象

当您执行类似 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]

编辑（评论后）：

如果想在不影响原数组的情况下修改employee，那么需要修改employee的副本。您可以使用 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 数据绑定为什么以及如何工作

Angular 2 Databinding why and how does it work

data-binding

javascript-databinding

angular