时间戳

首页 > 解决方案 > 监听对象更新 Angular 的变化

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

问题描述

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

组件.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 个字段项，所以我不想改变我的实现太多......

任何帮助，将不胜感激

标签： javascriptangulartypescript

解决方案

@Input只有当 Input 对象发生突变时，属性才会触发ngOnChanges函数。

在您的示例中，输入字段正在改变同一个用户对象中的每个单个属性，用户对象@Input总是引用同一个对象（即使它的子属性名称、surename 和年龄发生了变化），所以ngOnChanges不会被触发。

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

希望能帮助到你！

推荐阅读