angular2 SimpleChange不存储`previousValue` [英] angular2 SimpleChange is not storing `previousValue`

问题描述

这是对以下内容的后续操作: ngOnChange不存储previousValue属性

我正在将 ionic2 / angular2 与以下组件一起使用:

使用ChromeDevTools，我在 SimpleChange.current 中看到以下内容:

 /**更改检测回调.*/ngOnChanges(更改):void {如果(changes.current){this._animateChange(changes.current.previousValue，changes.current.currentValue);} 别的 {this._setPath(this.current);}}//changes.current.previousValue = {}//changes.current.cureentValue = 123//int//changes.current.isFirstChange()= true 

为什么我不能正确存储 changes.current.previousValue ?

toJSON 管道调用此方法，该方法返回一个匿名对象:

 /***创建计时器的快照*/toJSON():TimerAttributes {剩余的const = this.check(true);console.log(this.id，this.duration，剩余)返回 {id:this.id，标签:this.label，//asMilliseconds持续时间:this.duration，//asMilliseconds剩余:剩余，人性化:this.humanize(剩余)，//作为Unixtime过期:this.expires}} 

我唯一的猜测是，在每个更改检测循环中，我将为 snapshot 返回一个不同的对象，因此我丢失了 previousValue .但是，如果是这样，简单的解决方法是什么?

解决方案

SimpleChange 不能为 previousValue 存储正确的值，如果 @Input 变量的对象更改.

 /***创建计时器的快照，作为匿名对象返回*/toJSON():TimerAttributes {剩余的const = this.check();//console.log(this.id，this.duration，剩余)返回 {id:this.id，标签:this.label，//asMilliseconds持续时间:this.duration，//asMilliseconds剩余:剩余，人性化:this.humanize(剩余)，//作为Unixtime过期:this.expires}}/***返回具有更新的attr值的SAME对象*/snap():TimerAttributes {Object.assign(this.snapshot，this.toJSON())返回this.snapshot;} 

如果我的 toJSONPipe 调用 o.toJSON()，我将得到一个匿名对象，该对象具有属性值和 SimpleChange 不存储 changes.current.previousValue .

如果我的 toJSONPipe 调用 o.snap()，我将获得 SAME属性 o.snapshot 并进行更新属性值和 SimpleChange 正确存储 changes.current.previousValue .

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?

解决方案

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.

这篇关于angular2 SimpleChange不存储`previousValue`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！