Question

Q）如果我有一个带有大量属性的对象，所有属性都绑定到表单中的字段，那么当对象发生更改时如何捕获？

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

E.g

对象：

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

然而，理想情况下我需要另一种方式，例如角度1 $手表还有其他方法可以改变我的复杂对象，而不仅仅是简单输入字段

我正在使用Google自动填充功能Component，我正在处理类似的问题：当用户输入地址并从Google建议中选择一个时，我需要更新其他一些字段（如城市，省，邮政编码等）。

就像@Günter Zöchbauer所说，我已经创建了一个observable，以便知道我的自动填充component中的内容何时发生了变化，但第二个问题是视图不是发生这种情况时会更新。这是因为非常有趣且强大的东西叫做 Zones 。如果这个概念对您而言是新的，请参阅here和here以获得更好的解释。

你可以在那里阅读，

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

1）事件 - 用户事件，如点击，更改，输入，提交，......

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

3）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它需要知道这些更改，因为事情可能需要更新。

Answer 2

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

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

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

角度2 +离子2：检测对象是否被修改

2 个答案: