javascript - 监听 Angular 对象更新的变化

Question

我有一个可以像这样直接更新对象的表单

component.html

<input type="text" [(ngModel)]="user.name" />
<input type="text" [(ngModel)]="user.surname" />
<input type="text" [(ngModel)]="user.age" />

组件.ts

user = {
  name: null,
  surname: null,
  age: null
}

现在在我的 component.html 中，我有一个位于子组件中的保存按钮

<app-save-btn [user]="user"></app-save-btn>

在 app-save-btn 组件中，我正在使用 OnChanges

监听更改

@Input() user: User;

userForCompare: User;

ngOnChanges() {
  if (!this.userForCompare) {
    this.userForCompare = {...this.user};
  }
  console.log(this.userForCompare, this.user);
}

现在我的问题是，我获得了两个用户对象的第一个控制台日志，但是当我更新更多字段时，我不再获得更改更新..

现在我知道我可以创建单独的变量来保存每个值，但我有大约 30 个字段项，所以我不想对我的实现进行太多更改...

如有任何帮助，我们将不胜感激

Answer 1

@Input 属性仅在 Input 对象发生变化时才会触发 ngOnChanges 函数。

在您的示例中，输入字段正在改变同一用户对象中的每个属性，@Input 的用户对象始终引用同一对象(即使其子属性名称、surename 和年龄发生了突变)，因此 ngOnChanges 将不会被触发。

因此，每当任何输入字段发生更改时，您都必须使 component.ts 中的 this.user 等于一个全新的用户对象。

希望对你有帮助!