Angular 2 - 检查是否有任何默认值已更改答案

【问题标题】：Angular 2 - Check If Any Default Values Have ChangedAngular 2 - 检查是否有任何默认值已更改
【发布时间】：2017-12-11 11:31:05
【问题描述】：

我对@987654321@ 非常陌生，并且正在努力寻找一种方法来检查我的md-input 中的任何值是否已更改。

HTML

<md-card>
    <h3>Contact details</h3>
        <md-input-container class="containerRightMargin">
            <input mdInput placeholder="Telephone number" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.contact.telephoneNumber">
        </md-input-container>
        <md-input-container>
            <input mdInput placeholder="Email address" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.contact.email">
        </md-input-container>
        <div>
            <h3 class="headingWithButtonBeside">Address details</h3>
            <button *ngIf="!this.personalDetailsDisable" class="floatingButtonBesideHeading" md-button color="accent" title="Click to find your new address using your new postcode.">Use postcode lookup</button>
        </div>
        <md-input-container class="containerRightMargin">
            <input mdInput placeholder="Flat name" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.flatName">
        </md-input-container>
        <md-input-container>
            <input mdInput placeholder="Flat number" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.flatNumber">
        </md-input-container>
        <md-input-container class="containerRightMargin">
            <input mdInput placeholder="House name" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.houseName">
        </md-input-container>
        <md-input-container>
            <input mdInput placeholder="House number" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.houseNumber">
        </md-input-container>
        <md-input-container class="containerRightMargin">
            <input mdInput placeholder="Street" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.street">
        </md-input-container>
        <md-input-container>
            <input mdInput placeholder="District" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.district">
        </md-input-container>
        <md-input-container class="containerRightMargin">
            <input mdInput placeholder="City" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.city">
        </md-input-container>
        <md-input-container>
            <input mdInput placeholder="County" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.county">
        </md-input-container>
        <md-input-container class="containerRightMargin">
            <input mdInput placeholder="Country" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.country">
        </md-input-container>
        <md-input-container>
            <input mdInput placeholder="Postcode" [disabled]="this.personalDetailsDisable" [(ngModel)]="accountService.client?.address.postCode">
        </md-input-container>
</md-card>

我不知道如何检查我可以同时检查所有字段。这样做的原因是，除非任何字段值从我的服务返回的默认值发生变化，否则我希望显示“保存”按钮，否则我不希望显示保存按钮。

我知道这必须在我的组件中完成，我已经看到了 SimpleChange 等示例，但我根本无法让它工作

【问题讨论】：

标签： javascript angular2-template angular2-forms angular2-directives

【解决方案1】：

如果您可以分享您的组件源代码，我们可以看到更多。但到目前为止，它应该这样做。 Link to Angular docs.

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnChanges {
  @Input()
  prop: number;

  ngOnChanges(changes: SimpleChanges) {
    // changes.prop contains the old and the new value...
  }
}

【讨论】：