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

问）如果我有一个对象的负载属性，所有绑定到一个窗体中的字段，当对象发生变化时如何捕获？

我不想在每个字段上放置(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

你可以使用表单对象并检查表单是否已经改变。

我知道用新的Forms模块发布了Angular2和Ionic2的最新版本，但这是我的build议。

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

Answer 2

然而，理想情况下，我需要另一种方式，如angular1 $ watch，因为还有其他方法可以更改我的复杂对象，而不仅仅是简单的input字段

我正在使用Google自动填充Component ，而我正在处理类似的问题：当用户input地址并从Googlebuild议中select一个地址时，我需要更新其他字段（如城市，省，邮编等等上）。

就像@GünterZöchbauer所说的，我创build了一个observable ，以便知道什么时候我的自动完成component发生了变化，但是第二个问题是在发生这种情况时视图没有被更新。 那是因为一些非常有趣和有力的东西叫做Zones 。 如果这个概念对你来说是新的，请参考这里和这里的一个很好的解释。

正如你可以阅读那里，

应用程序状态更改是由三件事情引起的：

1）事件 – 用户事件，如点击，更改，input，提交，…

2）XMLHttpRequests – 例如从远程服务中获取数据定时器 –

3）setTimeout（），setInterval（），因为JavaScript

事实certificate，这是Angular真正有兴趣更新视图的唯一情况。

因此，如果

还有其他方法可以改变我的复杂对象

你将不得不让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它需要知道这些变化，因为事情可能需要更新。