Daten zur Eingabe() werden nicht erkannt: Angular 4

Question

Ich habe eine Elternkomponente mit einem Objekt namens 'data', das einige Daten enthält, die ich auf der Benutzeroberfläche anzeigen möchte. Die Daten werden in einer Tabelle angezeigt und ich habe eine untergeordnete Komponente erstellt, die diese Tabelle enthält. Während ich die Tabellenkomponente aufruft, gebe ich die Daten als @Input() weiter.

// Mutter componene Vorlage

<display-data [data]='data'></display-data> 

Auf der Anzeige, ich habe zwei Methoden in meiner Eltern-Komponente, die diese Daten Eigenschaft geändert. Einer davon Wieder ordnet das Datenfeld mit so etwas wie folgt aus:

setNewData() { 
    this.data = this.response.content; 
} 

und ein anderes Verfahren schiebt die neuen Daten zu bereits vorhandenen Daten:

addNewData(newData: Array) { 
    this.data.push(...newData); 
} 

Weil ich bin mit Angular Input(), Ich nehme an, dass die Dateneigenschaft in der untergeordneten Komponente sofort aktualisiert wird, wenn ich das Datenobjekt in der übergeordneten Komponente (Neuzuweisung oder Hinzufügen von mehr Daten) ändere und ich die neuen Daten auf der Benutzeroberfläche anzeigen werde. Das funktioniert wie erwartet. ABER, als ich versuchte, Angulars Lebenszyklus-Hook "ngOnChanges" zu betrachten, bemerkte ich, dass es nur aufgerufen wird, wenn die Neuzuweisung passiert, und nicht, wenn ich einige neue Daten in das Datenobjekt drücke.

Funktioniert das wie ngOnChanges? Weil ich eine Methode immer dann aufrufen möchte, wenn sich die Daten in der Kindkomponente ändern.

Answer 1

Ja, genau so funktioniert ngOnChanges.

ngOnChanges wird nur bei Neuzuweisung aufgerufen.

Wenn Sie möchten, dass eine Methode ausgeführt wird, wenn sich diese Daten ändern, können Sie Folgendes tun.

1. Erstellen Sie einen Service mit Member-Variablendaten und einer Funktion, die diese Variable zurückgibt.
2. Die übergeordnete Komponente kann die Methoden dieses Dienstes verwenden, um diese Variable abzurufen und zu aktualisieren.
3. Der Dienst enthält auch ein Ereignis-Emitter-Objekt, das von der untergeordneten Komponente abonniert werden kann.
4. So, jetzt, immer wenn die Elternkomponente die Service-Methode aufruft, um den Wert von Daten zu aktualisieren, können Sie dies tun und auch auf dem EventEmitter-Objekt ausgeben.

Lassen Sie mich wissen, wenn Sie irgendeine Art von Code dafür wollen. Aber Sie werden viel verstehen, wenn Sie selbst programmieren.