angular4のngOnChanges方法

Question

値を変更すると、私はなぜデモがangular.io（https://embed.plnkr.co/?show=preview）から実行できるのかわかりませんが、私のアプリは仕事ではありません。私のアプリで重要なことを残していたかどうかわからないのですが、ngOnChangesメソッドはもう動作しません

<ion-header> 
    <ion-navbar> 
     <ion-title>login</ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content padding> 
    <form #f="ngForm" (ngSubmit)="showValue(f)"> 
     <ion-item> 
      <ion-label fixed>username</ion-label> 
      <ion-input type="text" required [(ngModel)]="userName" name="userName"></ion-input> 
     </ion-item> 
     <ion-item> 
      <ion-label fixed>username2</ion-label> 
      <ion-input type="text" [value]="userName" (input)="userName = $event.target.value"></ion-input> 
     </ion-item> 
     <ion-item> 
      <ion-label fixed>pwd</ion-label> 
      <input type="text" [(ngModel)]="password" name="pwd"> 
      <ion-input type="password" [(ngModel)]="password" name="pwd"></ion-input> 
     </ion-item> 
     <input ion-button type="submit" value="commit" class="button-block-ios button"> 
     <button ion-button outline>Primary Outline</button> 
    </form> 
    <div> 
     <input type="text" [(ngModel)]="userName"> 
    </div> 
    <div *ngFor="let chg of changeLog">{{chg}}</div> 
    <div>{{userName}}</div> 
    <!--<input type="text" class="item-input" [value]="userName" (click)=showValue>--> 
</ion-content> 

Answer 1

ngOnChanges()は、コンポーネントの@Input()を変更検出後に更新すると、角度変化検出によってのみ呼び出されます。任意のコードによって入力が変更された場合は更新されません。入力ではないフィールドの場合、ngOnChangesは決して呼び出されません。

あなたは自分のフィールドのゲッター/セッターを作成し、値が

_userName: string = 'who am i'; 
set userName(val:string) { this._userName = val; /* more code */} 
get userName():string { return this._userName; } 

Answer 2

を更新している私は、あなたがそのような場合にはReactive Forms

を使用することをお勧めときに実行すべきことであるが、そこにコードを置くことができます」ことができるでしょう：

constructor(fb: FormBuilder) { 
    this.myForm = fb.group({ 
     'username': [ 
      '',     // initial value 
      Validators.required, // use if it's a required field 
     ] 
    }); 

    // subscribe on particular input change 
    this.usernameControl = this.myForm.controls['username']; 
    this.usernameControl.valueChanges.subscribe(() => { 
     // use this.usernameControl.value 
    }); 

    // or subscribe on any form input change 
    this.myForm.valueChanges.subscribe(() => { 
     // use this.myForm.value 
    }); 

} 

HTMLコードが含まれている必要があります

を

<form> 
    ... 
    <input class="form-control" [formControl]="usernameControl"> 
    ... 
</form>