angular2 SimpleChange is not storing `previousValu

问题:

this is a follow-up to: ngOnChange not storing previousValue property

I'm using ionic2/angular2 with this component: https://github.com/crisbeto/angular-svg-round-progressbar and the following 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>

using ChromeDevTools, I see the following 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

Why am I not storing changes.current.previousValue correctly?

the toJSON pipe calls this method, which returns an anonymous object:

  /**
   * 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
    }
  } 

my only guess is that I'm returning a different object for snapshot on each change detection loop, so I lose previousValue. But if so, what is the easy fix?

回答1:

SimpleChange does not store the correct value for previousValue if the object of the @Input variable changes.

  /**
   * 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;
  }

If my toJSONPipe calls o.toJSON() I get an anonymous object with attribute values and SimpleChange does not store changes.current.previousValue.

If my toJSONPipe calls o.snap() I get the SAME attribute o.snapshot with updated attribute values and SimpleChange correctly stores changes.current.previousValue.