Angular2 change detection: ngOnChanges nicht feuern für verschachtelte Objekt

rawLapsData weiterhin auf den gleichen array, auch wenn Sie ändern Sie den Inhalt des array (z.B. Elemente hinzufügen, Elemente entfernen, ein Element ändern).

Während der change-detection, bei der Winkel-Prüfungen Komponenten' input-Eigenschaften ändern, verwendet er (im wesentlichen) === für dirty checking. Für arrays, dies bedeutet, dass die array-Referenzen (nur) verschmutzt sind, überprüft. Da die rawLapsData array-Referenz nicht ändern, ngOnChanges() werden nicht genannt.

Ich denken kann zwei mögliche Lösungen:

1. Implementieren ngDoCheck() und führen Sie Ihre eigenen change-detection-Logik, um festzustellen, ob die array-Inhalte haben sich geändert. (Die Lifecycle-Hooks doc hat ein Beispiel.)

2. Weisen Sie ein neues array, in rawLapsData wenn Sie änderungen an der array-Inhalt. Dann ngOnChanges() aufgerufen wird, da die array-Referenz) angezeigt wird, als eine änderung.

In Ihrer Antwort, Sie kam mit einer anderen Lösung.

Wiederholen einige Kommentare hier auf den OP:

Dennoch sehe ich nicht, wie laps abholen können auf die änderung (sicherlich, es muss etwas vergleichbares ngOnChanges() selbst?) während map nicht.

• In der laps Komponente Ihr code/template durchläuft jeden Eintrag in der lapsData array und zeigt den Inhalt, also gibt es Winkel-Bindungen auf jedes Stück von Daten, die angezeigt wird.
• Auch wenn die Winkel nicht erkennen, dass änderungen an einer Komponente-Eingabe-Eigenschaften (mit === - Prüfung) es noch immer (standardmäßig) dirty prüft alle template-Bindungen. Wenn alle diese ändern, Eckige aktualisiert die DOM. Das ist, was Sie sehen.
• Die maps Komponente wahrscheinlich keine Bindungen in seiner Vorlage seiner lapsData input-Eigenschaft, richtig? Das würde die Differenz erklären.

Beachten Sie, dass lapsData in beide Komponenten und rawLapsData in der übergeordneten Komponente, die alle auf den gleichen/einem array. Deshalb, auch wenn es Eckig nicht bemerken (Referenz) änderungen der lapsData input-Eigenschaften die Komponente "get"/finden Sie alle array-Inhalte verpasst, weil Sie alle Anteil/Referenz, die einem array. Wir brauchen nicht Eckig zu propagieren und diese Veränderungen, wie wir mit einem primitiven Typ (string, number, boolean). Aber mit einem primitiven Typ, jede änderung des Wertes würde immer auslösen ngOnChanges() – das ist etwas, das Sie nutzen in Ihrer Antwort/Lösung.

Wie Sie wahrscheinlich herausgefunden, von jetzt object-input-Eigenschaften das gleiche Verhalten wie array-input-Eigenschaften.

InformationsquelleAutor Mark Rajcok

Als Erweiterung zu Markieren, Rajcok die zweite Lösung

Weisen Sie ein neues array, in rawLapsData, wenn Sie änderungen an der
array-Inhalte. Dann ngOnChanges() aufgerufen wird, da das array
(Referenz) angezeigt wird, als eine änderung

können Sie Klonen den Inhalt der array wie folgt:

rawLapsData = rawLapsData.slice(0);

Ich erwähne dies, weil

rawLapsData = Objekt.assign({}, rawLapsData);

nicht für mich arbeiten. Ich hoffe, das hilft.

InformationsquelleAutor decebal

Verwenden ChangeDetectorRef.detectChanges() zu erzählen Eckig zu laufen, eine change-detection-wenn Sie beim Bearbeiten eines verschachtelten Objekts (d.h. es findet mit seinem dirty checking).

InformationsquelleAutor Tim Phillips

Im Falle von Arrays kannst du es so machen:

In .ts Datei (Übergeordneten Komponente), wo Sie die Aktualisierung Ihres rawLapsData es so machen:

rawLapsData = somevalue; //change detection will not happen

Lösung:

rawLapsData = {...somevalue}; //change detection will happen

sowie ngOnChanges wird genannt in der Kind-Komponente

InformationsquelleAutor Danish Dullu

Change detection wird nicht ausgelöst, wenn Sie eine Eigenschaft ändern eines Objekts (einschließlich verschachtelten Objekts). Eine Lösung wäre zuweisen einer neuen Objektreferenz mit 'lodash' clone () - Funktion.

import * as _ from 'lodash';

this.foo = _.clone(this.foo);

InformationsquelleAutor Anton Nikprelaj

Stolperte ich über das gleiche brauchen. Und ich lese viel auf dieser so, hier ist mein Kupfer zu dem Thema.

Wenn Sie möchten, ändern Sie die Erkennung auf push, dann Sie es haben würde, wenn Sie ändern einen Wert, der ein Objekt innerhalb Recht ? Und hätten Sie auch, wenn du irgendwie entfernen von Objekten.

Wie gesagt, die Verwendung von changeDetectionStrategy.onPush

Sagen, Sie haben diese Komponente, die Sie gemacht, mit changeDetectionStrategy.onPush:

<component [collection]="myCollection"></component>

Dann würden Sie push ein Element und Auslöser der change detection :

myCollection.push(anItem);
refresh();

oder würden Sie ein Element entfernen und auslösen des change-detection :

myCollection.splice(0,1);
refresh();

oder würden Sie ändern attrbibute Wert für ein Element und Auslöser der change detection :

myCollection[5].attribute = 'new value';
refresh();

Inhalte aktualisieren :

refresh() : void {
    this.myCollection = this.myCollection.slice();
}

Slice-Methode gibt die genau die gleiche Array, und das [ = ] Zeichen stellen eine neue Referenz, die Auslösung der change-detection-jedes mal, wenn Sie es brauchen. Einfach und gut lesbar 🙂

Grüße,

InformationsquelleAutor Deunz

ok, also meine Lösung dafür war:

this.arrayWeNeed.DoWhatWeNeedWithThisArray();
const tempArray = [...arrayWeNeed];
this.arrayWeNeed = [];
this.arrayWeNeed = tempArray;

Und dieser trigger mich ngOnChanges

InformationsquelleAutor DanielWaw