Rilevamento modifiche Angular2: ngOnChanges non si attiva per l'oggetto nidificato

So di non essere il primo a chiederlo, ma non riesco a trovare una risposta nelle domande precedenti. Ho questo in un componente

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

Nel controller rawLapsdataviene mutato di volta in volta.

In laps, i dati vengono emessi come HTML in un formato tabulare. Questo cambia ogni volta che rawLapsdatacambia.

Il mio mapcomponente deve essere utilizzato ngOnChangescome trigger per ridisegnare i marker su una mappa di Google. Il problema è che ngOnChanges non si attiva quando si verificano rawLapsDatamodifiche nel genitore. Cosa posso fare?

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

Aggiornamento: ngOnChanges non funziona, ma sembra che lapsData sia in fase di aggiornamento. In ngInit è presente un listener di eventi per le modifiche dello zoom che chiama anche this.drawmarkers. Quando cambio lo zoom vedo davvero un cambiamento nei marker. Quindi l'unico problema è che non ricevo la notifica al momento della modifica dei dati di input.

Nel genitore, ho questa linea. (Ricorda che la modifica si riflette nei giri, ma non nella mappa).

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

E nota che this.rawLapsDataè esso stesso un puntatore al centro di un grande oggetto json

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

rawLapsData continua a puntare allo stesso array, anche se si modifica il contenuto dell'array (ad esempio, aggiungere elementi, rimuovere elementi, cambiare un elemento).

Durante il rilevamento delle modifiche, quando Angular controlla le proprietà di input dei componenti per la modifica, utilizza (essenzialmente) ===per il controllo sporco. Per le matrici, ciò significa che i riferimenti di matrice (solo) sono sottoposti a verifica sporca. Poiché il rawLapsDatariferimento dell'array non sta cambiando, ngOnChanges()non verrà chiamato.

Mi vengono in mente due possibili soluzioni:

1. Implementare ngDoCheck()ed eseguire la propria logica di rilevamento delle modifiche per determinare se il contenuto dell'array è cambiato. (Il documento Ganci del ciclo di vita ha un esempio .)

2. Assegnare un nuovo array rawLapsDataogni volta che si apportano modifiche al contenuto dell'array. Quindi ngOnChanges()verrà chiamato perché l'array (riferimento) verrà visualizzato come una modifica.

Nella tua risposta, hai trovato un'altra soluzione.

Ripetendo alcuni commenti qui sul PO:

Non riesco ancora a vedere come si lapspuò capire il cambiamento (sicuramente deve usare qualcosa di equivalente a ngOnChanges()se stesso?) Mentre mapnon ci riesco.

• Nel lapscomponente il codice / modello scorre su ogni voce lapsDatadell'array e visualizza i contenuti, quindi ci sono associazioni angolari su ogni pezzo di dati che viene visualizzato.
• Anche quando Angular non rileva alcuna modifica alle proprietà di input di un componente (usando il ===controllo), controlla comunque (di default) tutte le associazioni dei template. Quando uno di questi cambia, Angular aggiornerà il DOM. Questo è quello che stai vedendo.
• Il mapscomponente probabilmente non ha alcun legame nel suo modello con la sua lapsDataproprietà di input, giusto? Ciò spiegherebbe la differenza.

Si noti che lapsDatain entrambi i componenti e rawLapsDatanel componente padre tutti puntano allo stesso / un array. Quindi, anche se Angular non nota alcuna modifica (di riferimento) alle lapsDataproprietà di input, i componenti "ottengono" / vedono eventuali modifiche al contenuto dell'array perché condividono / fanno riferimento a quell'array. Non abbiamo bisogno di Angular per propagare questi cambiamenti, come faremmo con un tipo primitivo (stringa, numero, booleano). Ma con un tipo primitivo, qualsiasi modifica al valore si innescherebbe sempre ngOnChanges()- che è qualcosa che sfrutti nella tua risposta / soluzione.

Come probabilmente hai già capito, le proprietà di input dell'oggetto hanno lo stesso comportamento delle proprietà di input dell'array.

Non è l'approccio più pulito, ma puoi semplicemente clonare l'oggetto ogni volta che cambi il valore?

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

Penso che preferirei questo approccio ngDoCheck()piuttosto che implementare il tuo, ma forse qualcuno come @ GünterZöchbauer potrebbe intervenire.

In Case of Arrays puoi farlo in questo modo:

Nel .tsfile (componente principale) in cui stai aggiornando, rawLapsDatafallo in questo modo:

rawLapsData = somevalue; // change detection will not happen

Soluzione:

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

e ngOnChangeschiamerà nel componente figlio

Come estensione della seconda soluzione di Mark Rajcok

Assegnare un nuovo array a rawLapsData ogni volta che si apportano modifiche al contenuto dell'array. Quindi verrà chiamato ngOnChanges () perché l'array (riferimento) verrà visualizzato come una modifica

puoi clonare il contenuto dell'array in questo modo:

rawLapsData = rawLapsData.slice(0);

Sto citando questo perché

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

non ha funzionato per me. Spero che aiuti.

Se i dati provengono da una libreria esterna, potrebbe essere necessario eseguire l'istruzione di aggiornamento dei dati all'interno zone.run(...). Iniettare zone: NgZoneper questo. Se è già possibile eseguire l'istanza della libreria esterna all'interno zone.run(), potrebbe non essere necessario in un zone.run()secondo momento.

Utilizzare ChangeDetectorRef.detectChanges()per dire ad Angular di eseguire un rilevamento delle modifiche quando si modifica un oggetto nidificato (che manca con il suo controllo sporco).

Ho 2 soluzioni per risolvere il tuo problema

1. Utilizzare ngDoCheckper rilevare i objectdati modificati o meno
2. Assegna objecta un nuovo indirizzo di memoria object = Object.create(object)dal componente principale.

La mia soluzione "hack" è

   <div class="col-sm-5">
        <laps
            [lapsData]="rawLapsData"
            [selectedTps]="selectedTps"
            (lapsHandler)="lapsHandler($event)">
        </laps>
    </div>
    <map
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"   // <--------
        class="col-sm-7">
    </map>

selectedTps cambia contemporaneamente a rawLapsData e ciò offre alla mappa un'altra possibilità di rilevare la modifica attraverso un tipo primitivo di oggetto più semplice . NON è elegante, ma funziona.

Il rilevamento delle modifiche non viene attivato quando si modifica una proprietà di un oggetto (incluso l'oggetto nidificato). Una soluzione sarebbe quella di riassegnare un nuovo riferimento all'oggetto usando la funzione clone () 'lodash'.

import * as _ from 'lodash';

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

Ecco un trucco che mi ha appena messo nei guai con questo.

Quindi uno scenario simile all'OP: ho un componente angolare nidificato che necessita di dati passati ad esso, ma l'input punta a un array e, come menzionato sopra, Angular non vede un cambiamento in quanto non esamina il contenuto dell'array.

Quindi, per risolverlo, converto l'array in una stringa affinché Angular rilevi una modifica, quindi nel componente nidificato ho diviso (',') nuovamente la stringa in un array e i suoi giorni felici.

Mi sono imbattuto nello stesso bisogno. E ho letto molto su questo, quindi, ecco il mio rame sull'argomento.

Se desideri che il rilevamento delle modifiche venga trasmesso, lo avresti quando cambi un valore di un oggetto all'interno giusto? E lo avresti anche se in qualche modo rimuovessi gli oggetti.

Come già detto, utilizzare changeDetectionStrategy.onPush

Supponi di avere questo componente che hai creato, con changeDetectionStrategy.onPush:

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

Quindi spingi un elemento e attivi il rilevamento delle modifiche:

myCollection.push(anItem);
refresh();

oppure rimuovere un elemento e attivare il rilevamento delle modifiche:

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

o cambieresti un valore attrbibute per un oggetto e attiveresti il ​​rilevamento delle modifiche:

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

Contenuto di aggiornamento:

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

Il metodo slice restituisce esattamente lo stesso array e il segno [=] ne fa un nuovo riferimento, attivando il rilevamento delle modifiche ogni volta che ne hai bisogno. Facile e leggibile :)

Saluti,

Ho provato tutte le soluzioni menzionate qui, ma per qualche motivo ngOnChanges()ancora non ha funzionato per me. Così l'ho chiamato this.ngOnChanges()dopo aver chiamato il servizio che ripopola le mie matrici e ha funzionato .... giusto? probabilmente no. Neat? diavolo, no. Lavori? sì!

ok quindi la mia soluzione per questo era:

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

E questo mi fa innescare ngOnChanges

Ho dovuto creare un trucco per questo -

I created a Boolean Input variable and toggled it whenever array changed, which triggered change detection in the child component, hence achieving the purpose

Nel mio caso sono state le modifiche nel valore dell'oggetto che ngOnChangenon è stato acquisito. Alcuni valori di oggetto vengono modificati in risposta alla chiamata api. La reinizializzazione dell'oggetto ha risolto il problema e provocato l' ngOnChangeattivazione nel componente figlio.

Qualcosa di simile a

 this.pagingObj = new Paging(); //This line did the magic
 this.pagingObj.pageNumber = response.PageNumber;