Q) 如果我有一个带有大量属性的对象，所有属性都绑定到表单中的字段，我如何捕捉到对象发生了变化？
我不想在每个字段上都放置(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" />
【问题讨论】：
标签： angular typescript ionic-framework ionic2 ionic3
但是，理想情况下，我需要另一种方式，例如 angular 1 $watch，如 还有其他方法可以更改我的复杂对象，而不仅仅是简单的 输入字段
我在 Google Autocomplete Component 工作，我正在处理类似的问题：当用户输入地址并从 Google 建议中选择一个地址时，我需要更新一些其他字段（如城市、省、邮政编码等）。
就像@Günter Zöchbauer 说的那样，我创建了一个observable 以便知道我的自动完成component 中的某些内容何时发生了变化，但第二个问题是发生这种情况时视图没有被更新。那是因为一个非常有趣和强大的东西叫做 Zones。如果这个概念对您来说是新概念，请参阅 here 和 here 以获得很好的解释。
如您所见，
应用程序状态变化是由三件事引起的：
事件 - 用户事件，例如点击、更改、输入、提交……
XMLHttpRequests - 例如从远程服务获取数据时
定时器 - setTimeout(),setInterval()，因为 JavaScript
... 事实证明，只有这些是 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 它需要了解这些更改，因为可能需要更新。
【讨论】：
您可以使用表单对象并检查表单是否已更改。
我知道最新版本的 Angular2 和 Ionic2 与新的 Forms 模块存在一些问题，但这是我的建议。
【讨论】：