Warum würde die Änderung der Elementreihenfolge in einem Array in * ngFor = "let x of xs" die Komponente onChanges nicht auslösen?

Question

Ich habe eine übergeordnete Komponente:

<div *ngFor="let slice of slices"> 
    <my-slice [slice]="slice"> 
</div> 

und Kind-Komponente:

export class SliceComponent implements OnChanges { 
    @Input() 
    slice: Slice; 
    ... 
} 

Wenn ich den folgenden Code in der übergeordneten Komponente ausführen, werden nicht erhalten die Kinder Komponenten aktualisiert, obwohl die Ansicht Reihenfolge ändert sich.

let slice = this.slices[0]; 
    this.slices[0] = this.slices[1]; 
    this.slices[1] = slice; 

Außerdem, wenn ich folgendes

<div *ngFor="let slice of slices; let i=index"> 
    <my-slice [slice]="slice" [sliceOrder]="i"> 
</div> 

Nun fügen onChanges würde mit Änderungen sliceOrder statt slice fertig gebrannt.

Wie wählt angular2, was in der Komponenteneingabeeigenschaft geändert wird? Warum wird in diesem Fall sliceOrder geändert, nicht slice?

Answer 1

*ngFor überprüft den Array-Inhalt, um zu wissen, wann er aktualisiert werden muss, aber die Erkennung von Angular2-Änderungen überprüft nicht den Array- oder Objektinhalt. Es überprüft nur die Objektidentität.

Als Workarounds

• Sie eine Kopie des Arrays erstellen kann eine neue Identität zu bekommen this.arr = this.arr.slice()
• Sie ngDoCheck implementieren können und prüfen, ob Inhalte selbst ändert, zum Beispiel eine IterableDiffers von Angular bereitgestellt wird. Siehe auch https://angular.io/docs/ts/latest/api/core/index/DoCheck-class.html