Angular中如何通过ngModel比较属性的新旧值？

这个问题的核心是你需要在获取到初始数据时，保存一份独立的原始副本——因为ngModel是双向绑定，会直接修改当前car对象的属性，所以如果不单独存一份初始值，你就没法拿到原来的"BMW"来做对比了。

下面是具体的实现步骤：

1. 保存初始值的副本 #

在ngOnInit中获取到后端返回的car数据后，不要只赋值给this.car，还要深拷贝一份到新的变量（比如this.originalCar）。这里要注意用深拷贝，如果只是简单的赋值（this.originalCar = car），两个变量会指向同一个对象，修改this.car时originalCar也会跟着变，就失去了保存初始值的意义。

2. 在save()中进行对比 #

有了原始副本后，直接对比this.car.name和this.originalCar.name即可。

修改后的完整TS代码示例 #

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

class Car {
  name: string;
  // 修正原Car类的构造器语法错误
  constructor(name?: string) {
    this.name = name || '';
  }
}

@Component({
  // 此处省略你的组件元数据（selector、template等）
})
export class YourComponent implements OnInit {
  car = new Car();
  // 新增变量保存初始值副本
  originalCar = new Car();

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('/data').subscribe((carData: Car) => {
      this.car = carData;
      // 深拷贝初始值，展开运算符适合简单对象
      this.originalCar = { ...carData };
      // 如果Car对象有嵌套属性，推荐用JSON序列化方式深拷贝
      // this.originalCar = JSON.parse(JSON.stringify(carData));
    });
  }

  save() {
    // 直接对比当前值与初始值
    if (this.car.name !== this.originalCar.name) {
      console.log(`值发生了变化：旧值是${this.originalCar.name}，新值是${this.car.name}`);
      // 执行你的保存逻辑
    } else {
      console.log('值没有变化，无需执行保存操作');
    }
  }
}

关键细节说明 #

• 修正了你Car类的构造器语法错误，原写法constructor(private string name){}不符合TypeScript语法规范，调整为正确的属性定义方式。
• 深拷贝的选择：如果Car是简单对象（无嵌套属性、无自定义方法），用展开运算符{ ...carData }或Object.assign({}, carData)即可；如果存在嵌套对象，推荐使用JSON.parse(JSON.stringify(carData))，或者第三方工具（如Lodash的_.cloneDeep）实现更可靠的深拷贝。
• 保存后的originalCar会始终保留初始的"BMW"值，不会被ngModel的实时修改影响，确保你在save()方法中能准确完成新旧值对比。

内容的提问来源于stack exchange，提问作者蒋建雨