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

Question

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

当我直接点击check box时触发change事件。但是，当我单击 "Change Status" 按钮时，复选框状态正在更改，但未触发更改事件。有人可以告诉我怎么做吗？

Answer 1

我们必须使用事件处理程序而不是 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;
  }
}

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

Angular 4 checkbox trigger change event on model change

checkbox

typescript

angular-ngmodel

angular