角度2データバインディングなぜ、どのようにそれは、ドイツから

Question

グッドモーニング

に動作します最初に私のコードは、魅力と - 私のような角度2 - 私は物事をより速くよりも終らと素晴らしい学習曲線については満足に動作いつでも前に。

私の問題は、私はデータバインディングが動作する理由を理解しないということです。私が見たものについては、私はそれを説明するだろうコードのどの部分を得るいけません。誰かが私にヒントを与えることを願っています。リストの

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 

クリエーション：

Basiclyが、私は3つの変数を持って

<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（= Formular従業員を変更する）によって定義されます：

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> 

私は従業員クラスにすべてをバインドします。送信時に、データをデータベースに保存します。

これはbasicly私がすべてです。私の問題は、なぜ私が理解できないようになったのです。従業員クラスを私の公式で（提出の前でも）変更すると、クラスの従業員とpagedItemsクラスが変化しています。私のリストもそうです。

は、私が見ることは、私は次のように変数を設定することです： - > pagedItems - >人々 - 従業>従業員

しかし、他の方向につながる可能性がないライン。だから何とかAngularはこれを自分でやっています。

あなたがそれを説明できるか、それを説明するチュートリアルを送るだけであれば、私はとても幸せです。

EDIT 1：

@Input('employee') employee: Employee; 

私がここに書くいけない、なぜ私はかなり確実でないことも、formularコンポーネントでそれをインポートし、この方法：

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

しかし、それ以外の場合は文句を言わない仕事を。

ああ、私はすでに聞いている場合は、フォームShiftData（別のコンポーネント）の内部IがdisplayDatacollect（Formular）を設定する方法のヒントを持っている場合は、私はに幸せになる：私が正しくあなたの質問を理解していればD

Answer 1

、これは角度ではなくオブジェクト参照がJSでどのように動作するかには関係ありません。

それは従業員、従業員と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