web-dev-qa-db-ja.com

Angular 4チェックボックスは、モデル変更時に変更イベントをトリガーします

HTML

<input type="checkbox" id="1" [(ngModel)]="filter" (change)="onFilterChange($event)"> CheckBox

<button (click)="filter = !filter">Change Status</button>

TS

export class HelloWorld {

  filter : false;

  onFilterChange() {
    console.log('filter change called');
  }
}

チェックボックスを直接クリックすると、変更イベントがトリガーされます。しかし、「ステータスの変更」ボタンをクリックすると、チェックボックスのステータスは変更されますが、イベントの変更はトリガーされません。誰かがこれを行う方法を教えてもらえますか？

angulartypescriptcheckboxangular-ngmodel
9
Pratap A.K

この機能は、2方向バインディングではなく、イベントハンドラーで実現する必要があります

<input type="checkbox" id="1"
       [ngModel]="filter" (ngModelChange)="onFilterChange($event)"> Checkbox

<button (click)="onFilterChange($event)">Change Status</button>

そしてTSでは、

export class HelloWorld {

  filter = false;

  onFilterChange(eve: any) {
    this.filter = !this.filter;
  }
}
20
Sajeetharan