2017-02-09 4 views
0

dies ist ein Follow-up zu: ngOnChange not storing previousValue propertyangular2 SimpleChange speichert nicht `previousValue`

Ich bin ionic2/angular2 mit dieser Komponente mit: https://github.com/crisbeto/angular-svg-round-progressbar und das folgende Markup

<ion-card class="timer" 
    *ngFor="let snapshot of timers | toJSON" 
> 
    <ion-card-content> 
    <round-progress 
     [current]="snapshot.remaining" 
     [max]="snapshot.duration" 
     [rounded]="true" 
     [responsive]="true" 
     [duration]="18" 
     > 
    </round-progress> 
</ion-card> 

mit ChromeDevTools, ich sehe die folgenden in SimpleChange.current:

/** Change detection callback. */ 
    ngOnChanges(changes): void { 
    if (changes.current) { 
     this._animateChange(changes.current.previousValue, changes.current.currentValue); 
    } else { 
     this._setPath(this.current); 
    } 
    } 
// changes.current.previousValue = {} 
// changes.current.cureentValue = 123 // int 
// changes.current.isFirstChange() = true 

Warum bin ich nicht 012 speichertrichtig?

die toJSON Rohr ruft diese Methode auf, die ein anonymes Objekt zurückgibt:

/** 
    * create a snapshot of the timer 
    */ 
    toJSON() : TimerAttributes { 
    const remaining = this.check(true); 
    console.log(this.id, this.duration, remaining) 
    return { 
     id: this.id, 
     label: this.label, 
     // asMilliseconds 
     duration: this.duration, 
     // asMilliseconds 
     remaining: remaining, 
     humanize: this.humanize(remaining), 
     // as Unixtime 
     expires: this.expires 
    } 
    } 

meine einzige Vermutung ist, dass ich ein anderes Objekt für snapshot bei jeder Änderung Erfassungsschleife bin Rückkehr, so dass ich verlieren previousValue. Aber wenn ja, was ist die einfache Lösung?

+0

meine Vermutung ist richtig. Wenn ich 'Object.assign (snapshot, o.toJSON())' 'verwende, verweist' snapshot' auf das * selbe * Objekt und 'SimpleChange.previousValue' speichert den vorherigen Wert für' snapshot.remaining' korrekt. ABER, dann bin ich in Gefahr, einen "Ausdruck hat sich geändert, nachdem es überprüft wurde" Fehler zu bekommen. Was ist die Lösung? – michael

Antwort

1

SimpleChange speichert nicht den richtigen Wert für previousValue wenn das Objekt der @Input Variable ändert.

/** 
    * create a snapshot of the timer, return as anonymous object 
    */ 
    toJSON() : TimerAttributes { 
    const remaining = this.check(); 
    // console.log(this.id, this.duration, remaining) 
    return { 
     id: this.id, 
     label: this.label, 
     // asMilliseconds 
     duration: this.duration, 
     // asMilliseconds 
     remaining: remaining, 
     humanize: this.humanize(remaining), 
     // as Unixtime 
     expires: this.expires 
    } 
    } 


    /** 
    * return the SAME object with updated attr value 
    */ 
    snap(): TimerAttributes { 
    Object.assign(this.snapshot, this.toJSON()) 
    return this.snapshot; 
    } 

Wenn meine toJSONPipe Anrufe o.toJSON() Ich erhalte ein anonymen Objekt mit Attributwerten und SimpleChange nicht changes.current.previousValue speichern.

Wenn meine toJSONPipe Anrufe o.snap() ich das gleiche Attributo.snapshot mit aktualisierten Attributwerte erhalten und SimpleChange speichert korrekt changes.current.previousValue.