0

来自德国的早安，

首先，我的代码就像一个魅力，我对 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

4

1 回答 1

1

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

它与员工、员工和 pagedItems中的员工对象相同。

当您执行类似的操作时，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

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

于 2017-06-09T09:40:10.260 回答