Ionic 3股票应用：当前与往期行情值对比及背景色更新异常

嘿，我瞅你在Ionic 3开发股票行情应用时，碰到了背景颜色更新时灵时不灵的问题——这大概率是你复制往期行情数据的方式出了问题！咱们来拆解下问题，再给出可行的解决方案：

问题根源：错误的对象复制方式 #

你代码里用了this.oldliverates = Object.create(this.liverates)，但Object.create()并不是真正复制liverates的内容，它只是创建了一个以liverates为原型的新对象。这意味着当liverates更新为最新行情数据时，oldliverates会通过原型链直接访问到最新的值，导致你对比的其实是同一套数据，自然颜色更新就不稳定了。

正确的解决方案：复制真实的数据内容 #

根据liverates的数据类型（简单数组/对象数组），选择合适的复制方式：

1. 如果是简单值数组（比如纯数字、字符串数组） #

用扩展运算符或者slice()做浅拷贝就行，这会创建一个新数组，和原数组完全独立：

this.oldliverates = [...this.liverates];
// 或者
this.oldliverates = this.liverates.slice();

2. 如果是对象数组（比如每个元素是包含行情值的对象） #

这时候需要深拷贝，避免新旧数组里的对象引用相同。最简便的方式是用JSON.parse(JSON.stringify())（注意：如果数据里有函数、Date等特殊类型，这个方法会丢失这些内容，适合普通业务数据）：

this.oldliverates = JSON.parse(JSON.stringify(this.liverates));

完整代码示例 #

把你的代码修改后，完整版本大概是这样：

export class HomePage {
  liverates: any = [];
  oldliverates: any = [];

  ionViewDidLoad() {
    this.liverateservice.setcallback((data)=>{
      // 先把当前的行情数据存为旧值，再更新新数据
      // 根据你的数据类型选上面的复制方式，这里用对象数组的深拷贝示例
      this.oldliverates = JSON.parse(JSON.stringify(this.liverates));
      
      // 更新为最新的行情数据
      this.liverates = data;
    });
  }

  // 封装一个判断颜色的方法，方便模板调用
  getRateBackgroundColor(currentVal: number, oldVal: number): string {
    if (currentVal > oldVal) {
      return '#e8f5e9'; // 上涨用浅绿
    } else if (currentVal < oldVal) {
      return '#ffebee'; // 下跌用浅红
    }
    return 'transparent'; // 无变化用默认背景
  }
}

然后在模板里通过[style.backgroundColor]绑定颜色：

<ion-list>
  <ion-item 
    *ngFor="let rate of liverates; let i = index"
    [style.backgroundColor]="getRateBackgroundColor(rate.currentValue, oldliverates[i]?.currentValue)"
  >
    {{ rate.stockName }}: {{ rate.currentValue }}
  </ion-item>
</ion-list>

额外注意点 #

• 确保复制旧值和更新新值的顺序正确：先存旧值，再更新新值，别搞反了！
• 第一次回调时liverates是空数组，这时候复制的旧值也是空数组，后续更新就会正常工作啦。

内容的提问来源于stack exchange，提问作者Vinoth Kumar