Angular 4中lastScore渲染值异常问题求助

嘿，我之前也碰到过这种看似违背逻辑的诡异问题，咱们一步步拆解排查：

首先看你给出的代码：

this.score = 6; 
this.lastScore = this.score; 
this.score = 0;

从逻辑上lastScore确实该保持6，但模板渲染显示0，大概率是以下几种情况之一：

1. lastScore被定义为getter属性 #

如果你的组件里lastScore是用getter实现的（比如下面这种写法），模板每次渲染都会调用getter，返回的是当前的score值，自然会显示0：

// 错误写法
get lastScore() {
  return this.score;
}

解决方法：把lastScore改成普通的实例属性，去掉getter：

// 正确写法
lastScore: number; // 在组件类里声明

// 再执行你的赋值逻辑
this.score = 6; 
this.lastScore = this.score; 
this.score = 0;

2. score是引用类型而非基本类型 #

如果你的score不是直接的number基本类型，而是对象/数组（比如{ value: 6 }），那this.lastScore = this.score只是传递了引用，两者指向同一个内存地址。当你修改score的属性时，lastScore会跟着同步变化：

// 错误示例（引用类型赋值）
this.score = { value: 6 };
this.lastScore = this.score;
this.score.value = 0; // 此时lastScore.value也会变成0

解决方法：创建新的对象存储值（根据数据结构选择浅拷贝或深拷贝）：

// 浅拷贝（适用于简单对象）
this.lastScore = { ...this.score };

// 嵌套对象用深拷贝（注意JSON序列化的局限性）
this.lastScore = JSON.parse(JSON.stringify(this.score));

3. 快速验证排查 #

先在赋值后加一行控制台打印，确认lastScore的实际值：

this.score = 6; 
this.lastScore = this.score; 
this.score = 0;
console.log('lastScore实际值:', this.lastScore); // 看控制台输出是6还是0

• 如果控制台显示6，但模板显示0：检查模板是否写错变量名（比如误写为{{ score }}），或者手动触发Angular变更检测：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  // 赋值后调用
  this.cdr.detectChanges();
  

• 如果控制台显示0：那肯定是赋值逻辑的问题，回到上面1、2两种情况排查。

内容的提问来源于stack exchange，提问作者cash.io.co