Angular 2 + Ionic 2：检测对象是否被修改

Question

问）如果我有一个包含大量属性的对象，所有属性都绑定到表单中的字段，我如何捕捉对象发生变化的时间？

我不想在每个字段上放置 (blur) 事件，因为页面已经很重了，这可能会导致页面上有太多的听众。

例如

对象：

var person = {
    name: string,
    email: string,
    phone: string
};

表格：

<input [(ngModel)]="person.name" type="text" />
<input [(ngModel)]="person.email" type="text" />
<input [(ngModel)]="person.phone" type="text" />

Answer 1

您可以使用表单对象并检查表单是否已更改。

我知道最新版本的 Angular2 和 Ionic2 与新的 Forms 模块存在一些问题，但这是我的建议。

https://angular.io/docs/ts/latest/guide/forms.html

Answer 2

However, ideally I need another way, like the angular 1 $watch, as there are other ways my complex object can be changed, not just simple input fields

我在 Google 自动完成 Component 中工作，我正在处理一个类似的问题：当用户键入一个地址并且 select 来自 Google 建议，我需要更新一些其他字段（如城市、省份、邮政编码等）。

喜欢 @Günter Zöchbauer says, I've created an observable in order to know when something has changed in my autocomplete component, but the second problem was that the view was not being updated when that happened. That's because something very interesting and powerfull called Zones. If the concept is new for you, please refer to here and here 以获得很好的解释。

如您所见，

Application state change is caused by three things:

Events - User events like click, change, input, submit, …

XMLHttpRequests - E.g. when fetching data from a remote service

Timers - setTimeout(),setInterval(), because JavaScript

… it turns out that these are the only cases when Angular is actually interested in updating the view.

所以如果

there are other ways my complex object can be changed

您必须让 Angular 知道某些内容已更改并且需要我们了解更新内容。这就是我所做的：

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class AutocompleteService {

    private autocompleteObserver: any;
    public autocomplete: any;

    constructor(...) {
        this.autocompleteObserver = null;

        this.autocomplete = Observable.create(observer => {
            this.autocompleteObserver = observer;
        });
    }

    public initializeAutocomplete(element): void { 

        // Where all the magic happens
        // ...

        // Send informtaion back to the caller
        this.autocompleteObserver.next(addressInformation);
    }

然后在我的页面.ts:

import { Component, NgZone } from '@angular/core';
import { AutocompleteService } from '../../providers/autocomplete-service/autocomplete-service';

@Component({
  templateUrl: 'build/pages/my-new-page/my-new-page.html',
  directives: [FORM_DIRECTIVES],
  providers: [AutocompleteService]
})
export class MyNewPage {

    constructor(..., private autocompleteService : AutocompleteService) {
    
        // Initialize all the things you need
        // ... 

       this.autocompleteService.autocomplete.subscribe((addressInfo) => {
            this.ngZone.run(() => {
                // Update the fields of the form, and Angular will update
                // the view for you.
                this.updateAddress(addressInfo);
            });
        });
    }
}

因此，通过在 angular 区域 中执行一些代码，您告诉 Angular 它需要了解这些更改，因为事情可能会需要更新。

Angular 2 + Ionic 2：检测对象是否被修改

Angular 2 + Ionic 2: Detect if an object was modified

angular

typescript

ionic-framework

ionic2

ionic3