Angular 4复选框触发模型更改时的更改事件

时间:2017-10-09 12:58:29

标签: angular typescript checkbox angular-ngmodel

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');
  }
}

当我直接点击复选框时,会触发更改事件。但是当我点击“更改状态”按钮时,复选框状态正在改变,但更改事件未触发。有人可以告诉我怎么做吗?

1 个答案:

答案 0 :(得分:17)

我们必须使用事件处理程序来实现此功能,而不是使用双向绑定

<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;
  }
}