Angular2 wykrywanie zmian: ngOnChanges nie uruchamia się dla zagnieżdżonego obiektu

Nie najczystsze podejście, ale możesz po prostu sklonować obiekt za każdym razem, gdy zmienisz wartość?

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

Myślę, że wolałbym takie podejście niż implementację własnego ngDoCheck(), ale może ktoś taki jak @günterzöchbauer mógłby to zrobić.

Jako rozszerzenie drugiego rozwiązania Marka Rajcoka

Przypisz nową tablicę do rawLapsData za każdym razem, gdy wprowadzasz jakiekolwiek zmiany w zawartość tablicy. Wtedy ngOnChanges () zostanie wywołana, ponieważ tablica (reference) pojawi się jako zmiana

Możesz sklonować zawartość tablicy w następujący sposób:

rawLapsData = rawLapsData.slice(0);

Wspominam o tym, ponieważ

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

Jeśli dane pochodzą z zewnętrznej biblioteki, może być konieczne uruchomienie instrukcji data upate w zone.run(...). Wstrzyknąć zone: NgZone w tym celu. Jeśli możesz uruchomić instancję zewnętrznej biblioteki w zone.run() już, możesz nie potrzebować zone.run() później.

Moim rozwiązaniem jest

   <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 zmienia się w tym samym czasie co rawLapsData, co daje map kolejną szansę wykrycia zmiany za pomocą prostszego obiektu prymitywnego typu. Nie jest elegancki, ale działa.

Użyj ChangeDetectorRef.detectChanges(), aby powiedzieć Angular, aby uruchomił wykrywanie zmian podczas edycji zagnieżdżonego obiektu (który pomija przy sprawdzaniu brudu).

Oto hack, który właśnie wyciągnął mnie z kłopotów z tym.

Więc podobny scenariusz do OP-mam zagnieżdżony Składnik Angular, który potrzebuje danych przekazywanych do niego, ale wejście wskazuje na tablicę i jak wspomniano powyżej, Angular nie widzi zmiany, ponieważ nie sprawdza zawartości tablicy.

Aby to naprawić konwertuję tablicę na łańcuch dla Angular, aby wykryć zmianę, a następnie w zagnieżdżonym komponencie dzielę (',') łańcuch z powrotem na tablicę i jego happy znowu dni.

W przypadku tablic można to zrobić tak:

W pliku .ts (komponent nadrzędny) gdzie aktualizujesz swój rawLapsData Zrób to tak:

rawLapsData = somevalue; // change detection will not happen

Rozwiązanie:

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

I ngOnChanges będą wywoływane w komponencie potomnym

Wykrywanie zmian nie jest uruchamiane po zmianie Właściwości obiektu (w tym obiektu zagnieżdżonego). Jednym z rozwiązań byłoby ponowne przypisanie nowego odniesienia do obiektu za pomocą funkcji' lodash ' clone ().

import * as _ from 'lodash';

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

Natknąłem się na tę samą potrzebę. Dużo na ten temat czytałem, więc oto mój Miedziak na ten temat.

Jeśli chcesz, aby Twoja zmiana była wykrywana podczas push, to będziesz ją miał, gdy zmienisz wartość obiektu wewnątrz, prawda ? I Ty też byś to miał, gdybyś w jakiś sposób usunął obiekty.

Jak już wspomniano, użycie changeDetectionStrategy.onPush

Powiedz, że masz ten komponent, który stworzyłeś, z changeDetectionStrategy.onPush: {]}

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

Wtedy naciskasz element i uruchamiasz wykrywanie zmian:

myCollection.push(anItem);
refresh();

Lub usuniesz element i uruchomisz wykrywanie zmian:

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

Lub zmienisz wartość attrbibute dla elementu i uruchomisz wykrywanie zmiany:

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

Zawartość odświeżania:

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

Metoda slice zwraca dokładnie tę samą tablicę, a znak [ = ] wprowadza do niej nowe odniesienie, uruchamiając wykrywanie zmian za każdym razem, gdy jest potrzebna. Łatwe i czytelne:)

Pozdrawiam,