角度4:如何观察对象的变化? [英] Angular 4: How to watch an object for changes?

问题描述

ETA:我知道可以通过多种方式查看我的表格的更改.那不是我想做的.就像标题所说的那样，我要问的是如何观察对 object 的更改.下面显示的应用仅用于说明目的.请回答我所问的问题.谢谢！

ETA: I know that there are various ways to watch my form for changes. That is not what I am trying to do. As the title says, I am asking how to watch for changes to an object. The app shown below is for illustration purposes only. Please answer the question that I have asked. Thanks!

我有一个简单的应用程序:

I have this simple app:

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

export class Customer {
    firstName: string;
    favoriteColor: string;
}

@Component({
    selector: 'my-app',
    template: `
        <div *ngIf="customer">
            <input type="text" [(ngModel)]="customer.firstName">
            <input type="text" [(ngModel)]="customer.favoriteColor">
        </div>
        `
})
export class AppComponent implements OnInit {

    private customer: Customer;

    ngOnInit(): void {

        this.customer = new Customer();

        // TODO: how can I register a callback that will run whenever
        // any property of this.customer has been changed?

    }

}

注意待办事项.我需要注册一个回调，只要更改this.customer的任何属性，该回调就将运行.

Note the TODO. I need to register a callback that will run whenever any property of this.customer has been changed.

我不能在输入上使用ngChange.我需要直接订阅模型上的更改.原因与我的用例有关，在这里不值得讨论.只是相信我，这不是一个选择.

I cannot use ngChange on the inputs. I need to subscribe directly to changes on the model. The reasons pertain to my use case, and aren't worth going into here. Just trust me that this isn't an option.

这可能吗?我做了很多谷歌搜索，但是我干了.

Is this possible? I've done a lot of Googling, but I've come up dry.

推荐答案

Angular通常使用注入到构造函数中的方法 KeyValueDiffers 类.

Angular usually uses injected into constructor KeyValueDiffers class.

对于您来说，它看起来像:

For your case it could look like:

import { KeyValueChanges, KeyValueDiffer, KeyValueDiffers } from '@angular/core';

export class Customer {
  firstName: string;
  favoriteColor: string;
}

@Component({
  selector: 'my-app',
  templateUrl: `./app.component.html`
})
export class AppComponent {
  private customerDiffer: KeyValueDiffer<string, any>;
  private customer: Customer;

  constructor(private differs: KeyValueDiffers) {}

  ngOnInit(): void {
    this.customer = new Customer();
    this.customerDiffer = this.differs.find(this.customer).create();
  }

  customerChanged(changes: KeyValueChanges<string, any>) {
    console.log('changes');
    /* If you want to see details then use
      changes.forEachRemovedItem((record) => ...);
      changes.forEachAddedItem((record) => ...);
      changes.forEachChangedItem((record) => ...);
    */
  }

  ngDoCheck(): void {
      const changes = this.customerDiffer.diff(this.customer);
      if (changes) {
        this.customerChanged(changes);
      }
  }
}

Stackblitz示例

Stackblitz Example

另一种选择是在要检查的属性上使用二传手.

One more option is using setter on properties that you want to check.

另请参见

• http ://blog.mgechev.com/2017/11/14/angular-iterablediffer-keyvaluediffer-custom-differ-track-by-fn-performance/

这篇关于角度4:如何观察对象的变化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！